现在越来越多的网站正在使用动画，无论是以GIF，SVG，WebGL，背景视频等形式。 当正确使用时，网络上的动画带来生机和交互性，为用户增添了额外的反馈和体验。
在本教程中，我将向您介绍CSS动画; 高性能的做事方式越来越受到browser support的欢迎。 下面的示例涵盖了基础知识：一个方形元素变化为圆形。
实现效果为https://codepen.io/mengmengpr...
高级选项
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代码中使用前缀。
要了解更多有关浏览器前缀的信息，可以查看http://css3please.com/。
多个动画
您可以使用逗号分隔符添加多个动画。假设我们要添加一个旋转到元素，需要声明额外的@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>接着，给div添加默认的样式：
div {
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 {
200px;
height: 200px;
background-color: coral;
animation: square-to-circle 2s 1s infinite alternate;
}现在动画的状态是：
动画名称为
square-to-circle。动画时长为2s。
动画延迟为1s。
动画循环次数为
infinite，因此会无限循环。动画循环方向为
alternate，它将从开始到结束，然后反向执行，然后再从开始到结束，一直循环。
使用animation-timing-function
我们可以添加到动画属性的最后一个值是动画定时功能。这将定义我们运动的速度，加速度和减速度。这个属性可以是一个非常详细的值（需要笨拙的手动计算），但是有很多免费的网站提供资源和动态定时功能的实时定制。
一个相关的工具是CSS Easing Animation Tool，可以用来计算animation-timing-funtion。
通过在工具里的计算，使用animation-cubic-bezier，给我们的动画添加一个弹性特效。最终代码如下：
div {
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;最近发现很多国外的优质文章，翻译是自己学习的过程也是分享的过程。喜欢的话，点个赞吧。