现在越来越多的网站正在使用动画，无论是以GIF，SVG，WebGL，背景视频等形式。 当正确使用时，网络上的动画带来生机和交互性，为用户增添了额外的反馈和体验。
在本教程中，我将向您介绍CSS动画; 高性能的做事方式越来越受到browser support的欢迎。 下面的示例涵盖了基础知识：一个方形元素变化为圆形。
实现效果为
高级选项
Envato市场上的设计师们一直在忙于创作一系列的CSS动画，从阴影到色带，滑块等。你可以将它们插入到你的网站中。
您还可以聘请Envato Studio的CSS专家，以帮助您为您的项目提供更丰富的定制。@keyframes 和 Animation
CSS动画的主要组件是@keyframes，即创建动画的CSS规则。将@keyframes视为时间轴上的阶段。 在@keyframes中，您可以定义这些阶段，每个阶段都有不同的样式声明。
接下来，要使CSS动画工作，您需要将@keyframes绑定到一个选择器。这将逐步解析@keyframes声明中的所有代码，并根据阶段将初始样式更改为新样式。
@keyframes
接下来我们将设置动画阶段。@keyframes的属性有：
我们选择的名称（这里为tutsFade）。
阶段：0%-100%或者from(0%)-to(100%)。
css样式：我们即将应用到每个阶段的样式。
示例：
@keyframes tutsFade { 0% { opacity: 1; } 100% { opacity: 0; }}/*---- 或者 ----*/@keyframes tutsFade { from { opacity: 1; } to { opacity: 0; }}/*---- 简写 ----*/@keyframes tutsFade { to { opacity: 0; }} 上面的代码将实现一个元素不透明度的过度，从opacity: 1到opacity: 0。上述每个方法都将获得相同的结果。
@Animation
动画属性用于在CSS选择器中调用@keyframes。
Animation可以有很多属性：animation-name：@keyframes的名字（这里是tutsFade)。animation-duration：动画持续时长。animation-timing-function：设置动画的速度（linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier)。animation-delay：动画开始前的延迟。animation-iteration-count：动画循环的次数。animation-direction：定义是否应该轮流反向播放动画。如果animation-direction值是"alternate"，则动画会在奇数次数正常播放，而在偶数次数反向播放。animation-fill-mode：指定当我们的动画完成时将哪些样式应用于元素。
示例：
.element { animation-name: tutsFade; animation-duration: 4s; animation-delay: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate;}/*---- 简写 ----*/.element { animation: tutsFade 4s 1s infinite linear alternate;} 添加不同浏览器支持的前缀
我们需要使用浏览器特定的前缀来确保最佳的浏览器支持。 标准的前缀都有：
Chrome & Safari：
-webkit-Firefox：
-moz-Opera：
-o-IE：
-ms-
上面的例子将变为：
.element { -webkit-animation: tutsFade 4s 1s infinite linear alternate; -moz-animation: tutsFade 4s 1s infinite linear alternate; -ms-animation: tutsFade 4s 1s infinite linear alternate; -o-animation: tutsFade 4s 1s infinite linear alternate; animation: tutsFade 4s 1s infinite linear alternate;}@-webkit-keyframes tutsFade { /* your style */ }@-moz-keyframes tutsFade { /* your style */ }@-ms-keyframes tutsFade { /* your style */ }@-o-keyframes tutsFade { /* your style */ }@keyframes tutsFade { /* your style */ } 为了本教程的可读性，接下来将不使用前缀，但最终版本会包含它们，我也鼓励您能在您的CSS代码中使用前缀。
要了解更多有关浏览器前缀的信息，可以查看。
多个动画
您可以使用逗号分隔符添加多个动画。假设我们要添加一个旋转到元素，需要声明额外的@keyframes，然后绑定到我们的元素：
.element { animation: tutsFade 4s 1s infinite linear alternate, tutsRotate 4s 1s infinite linear alternate;}@keyframes tutsFade { to { opacity: 0; }}@keyframes tutsRotate { to { transform: rotate(180deg); }} 正方形到圆形的变换
接下来将创建一个简单的形状转换;使用上述原则来将一个正方形逐步变换为圆形。我们共有五个阶段，在每个阶段，都会定义元素的边框半径，旋转和不同的背景颜色。
基本元素
首先，我们创建一个html元素来进行动画。
接着，给div添加默认的样式：
div { width: 200px; height: 200px; margin: 50px; background-color: coral;} 定义Keyframes
现在，我们来创建一个有五个阶段的@keyframes：
@keyframes square-to-circle { 0%{ border-radius: 0 0 0 0; background: coral; transform: rotate(0deg); } 25%{ border-radius: 50% 0 0 0; background: darksalmon; transform: rotate(45deg); } 50%{ border-radius: 50% 50% 0 0; background: indianred; transform: rotate(90deg); } 75%{ border-radius: 50% 50% 50% 0; background: lightcoral; transform: rotate(135deg); } 100%{ border-radius: 50%; background: darksalmon; transform: rotate(180deg); }} 应用动画
定义完我们的square-to-circle动画，我们还需要将动画应用到div上:
div { width: 200px; height: 200px; background-color: coral; animation: square-to-circle 2s 1s infinite alternate;} 现在动画的状态是：
动画名称为
square-to-circle。动画时长为2s。
动画延迟为1s。
动画循环次数为
infinite，因此会无限循环。动画循环方向为
alternate，它将从开始到结束，然后反向执行，然后再从开始到结束，一直循环。
使用animation-timing-function
我们可以添加到动画属性的最后一个值是动画定时功能。这将定义我们运动的速度，加速度和减速度。这个属性可以是一个非常详细的值（需要笨拙的手动计算），但是有很多免费的网站提供资源和动态定时功能的实时定制。
一个相关的工具是，可以用来计算animation-timing-funtion。
通过在工具里的计算，使用animation-cubic-bezier，给我们的动画添加一个弹性特效。最终代码如下：
div { width: 200px; height: 200px; margin: 50px; background-color: coral; animation: square-to-circle 2s 1s infinite cubic-bezier(1, .015, .295, 1.225) alternate;} 最后一步
在现代浏览器中，我们的动画都能完美运行，但是Firefox在动画渲染方面较差，旋转过程中边缘会出现锯齿。我们可以通过添加outline样式完善：
outline: 1px solid transparent;
最近发现很多国外的优质文章，翻译是自己学习的过程也是分享的过程。喜欢的话，点个赞吧。