动画是使元素从一种样式逐渐变化为另外一种效果，CSS3动画的生成，主要依赖@keyframes定义动画，animation执行动画。

@keyframes

通过 @keyframes 规则创建动画。

@keyframes keyframes-name {keyframes-selector {css-styles;}}
keyframes-name 帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。
keyframes-selector 动画时长的百分比。合法值：
0-100%
from 等效于 0%
to 等效于 100%
css-styles 需要改变的css样式，支持多属性

animation

animation 是一个简写的属性，用于设置6个动画属性：

• animation-name：这个就是使用@keyframes定义的动画名称；
• animation-duration：动画执行的时间，以秒为单位
• animation-delay：规定动画开始之前的延迟
• animation-iteration-count：规定动画应该播放的次数,n(次数) | infinite(无限次)
• animation-direction：规定是否应该轮流反向播放动画
• animation-timing-function：规定动画的速度曲线

@keyframes changeSize {0% {transform: scale(0.8);            }50% {transform: scale(1.2);            }100% {transform: scale(0.8);            }
}.demo {animation-name: changeSize;animation-duration: 2s;animation-iteration-count:infinite;
}

animation-timing-function

这里说下复杂属性，第一个是animation-timing-function：规定动画速度的曲线

值	说明
ease	默认，低速开始，然后加快，结束前变慢
linear	从头到尾速度相同
ease-in	以低速度开始，先慢后快
ease-out	以低速结束，先快后慢
ease-in-out	以低速开始和结束
cubic-bezier(x1,y1,x2,y2)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

cubic-bezier：三次赛贝尔曲线函数，前面的几个预设函数都可以通过它来实现。 通过控制曲线上的四个点（起始点(0,0)、终止点(1,1)以及两个相互分离的中间点）来绘制一条曲线并以曲线的状态来反映动画过程中速度的变化。可以访问 cubic-bezier.com 来设置对应的值。

ease 的效果等同于 cubic-bezier(.25,.01,.25,1)

linear 的效果等同于 cubic-bezier(0,0,1,1)

ease-in 的效果等同于 cubic-bezier(.42,0,1,1)

ease-out 的效果等同于 cubic-bezier(0,0,.58,1)

ease-in-out 的效果等同于 cubic-bezier(.42,0,.58,1)

@keyframes dropdown {0% {top: 0px;}100% {top: 420px;}
}ul li{&:first-child{animation: dropdown 6s ease infinite;}&:nth-child(2){animation: dropdown 6s linear infinite;}&:nth-child(3){animation: dropdown 6s ease-in infinite;}&:nth-child(4){animation: dropdown 6s ease-out infinite;}&:nth-child(5){animation: dropdown 6s ease-in-out infinite;}&:last-child{animation: dropdown 6s cubic-bezier(.08,.6,.67,1.03) infinite;}
}

animation-direction

animation-direction 定义是否应该轮流反向播放动画，如果动画次数设置为一次，则无效。

值	说明
normal	默认，正常播放
reverse	动画反向播放
alternate	交替播放， 动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）反向播放。
alternate-reverse	交替播放， 动画会在奇数次数（1、3、5 等等）反向播放，而在偶数次数（2、4、6 等等）正常播放。

我们可以把上面的案例每个都加上alternate的参数，再看下效果，是不是更赞了？

ul li{&:first-child{animation: dropdown 6s ease infinite alternate;}&:nth-child(2){animation: dropdown 6s linear infinite alternate;}&:nth-child(3){animation: dropdown 6s ease-in infinite alternate;}&:nth-child(4){animation: dropdown 6s ease-out infinite alternate;}&:nth-child(5){animation: dropdown 6s ease-in-out infinite alternate;}&:last-child{animation: dropdown 6s cubic-bezier(.08,.6,.67,1.03) infinite alternate;}
}

 旋转

img {width: 315px;height: 315px;animation: circle 10s infinite linear;@keyframes circle {from {transform: rotate(0);}to {transform: rotate(360deg);}}}//
@keyframes circleAnimate {0%{opacity: .3;}100%{opacity: 1;}}.l{left:0;&::before{position: absolute;width:100%;height:100%;content: "";background: url(./img/l1.min.png);animation: circleAnimate 1s ease-in-out 0s infinite;}&::after{position: absolute;width:100%;height:100%;content: "";background: url(./img/l1-2.min.png);animation: circleAnimate 1s ease-in-out 0.5s infinite;}}