一、transition（过渡）
其作用是平滑的改变css的值，无论是点击、焦点、hover事件，只要css的值改变了，就是平滑的，就是动画；
1、兼容性
- IE10 及以上支持；
- Safari 和 Chrome25 及以前的版本需要前缀 -webkit-；
- Firefox4 及以前版本需要前缀 -moz-；
2、写法
- 要添加过渡的 css 属性；
- 规定效果时长；
- 若给多个属性添加过渡效果，可用逗号隔开多个属性；
div {
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
width: 100px;
}
div:hover {
width: 300px;
}
若无规定时长，则没有过渡效果，默认为0；
3、过渡属性
- transition：简写，一次性设置多个过渡属性；
- transition-property：规定应用过渡的属性名称；
- transition-duration：定义过渡动画持续时间，默认 0s；
- transition-delay：指定延迟过渡时间，默认是0s；
- transition-timing-function：定义过渡效果时间曲线，默认 'ease'；
- linear：匀速；
相当于：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0) - ease：慢速开始，变快，慢速结束；
相当于：cubic-bezier(.25, .1, .25, 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) - cubic-bezier(x1,y1,x2,y2)：自定义三次贝塞尔曲线，x 值是 0-1 之间的数，y 值任意；
三次贝塞尔曲线默认 P0(0, 0) 和 P3(1, 1)，中间的 P1 和 P2 拉扯则自定义；
- linear：匀速；
二、animation（动画）
1、兼容性
- IE10 及以上；
- Safari 和 Chrome 需要前缀 -webkit-；
- Firefox 需要前缀 -moz-；
2、@keyframes 规则
- 用于创建动画逐渐变化的规则；
- 可改变任意多样式，任意多次数；
- 用百分比规定变化进度，或者关键字「from」和「to」；
from=0%，to=100%；
3、animation 动画属性
写法
- 在选择器内定义动画属性；
- 需定义绑定的 @keyframes 动画规则名称；
- 需定义动画时长，若无定义时长则无动画效果，默认值0；
属性 - animation：简写，规定除了 animation-play-state 之外的所有属性；
- animation-name：规定 @keyframes 动画名称；
- animation-duration：规定动画完成一个周期所花费的时间，默认 0s；
- animation-timing-function：规定动画的速度曲线，默认是 'ease'；
规则和上面过渡的一样； - animation-delay：规定动画何时开始，默认 0s；
- animation-iteration-count：规定动画被播放的次数，默认是 1；
- n：定义播放次数；
- infinite：无限次播放；
- animation-direction：规定动画是否在下一周期逆向播放， 默认是 'normal'；
- normal：下一周期正常播放；
- alternate：轮流反向播放；
- animation-play-state：规定动画是否正在运行或暂停，默认是 'running'；
- paused：规定动画已暂停；
-running：规定动画正在播放；
- paused：规定动画已暂停；
- animation-fill-mode：规定动画时间之外的状态；
- none：不改变默认行为；
- forwards：当动画完成之后保持最后一个属性值；
- backwards：在动画开始之前的时间应用第一个属性值；
- both：forwards 和 backwards 都被应用；
@keyframes first
{
0% { background: red; }
25% { background: yellow; }
50% { background: blue; }
75% { background: green; }
100% { background: black; }
}
@-moz-keyframes first /* Firefox */
{
0% { background: red; }
25% { background: yellow; }
50% { background: blue; }
75% { background: green; }
100% { background: black; }
}
@-webkit-keyframes first /* Safari & Chrome */
{
0% { background: red; }
25% { background: yellow; }
50% { background: blue; }
75% { background: green; }
100% { background: black; }
}
.firstAn {
animation: first 5s linear 1s 1 normal forwards;
-moz-animation: first 5s linear 1s 1 normal forwards;
-webkit-animation: first 5s linear 1s 1 normal forwards;
&:hover {
animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
}
