过渡：就相当于在点击或者滑动等等动作时，css进行样式改变的动画。一个元素，它的属性从一个值变化到另一个值。
transition过渡
transition-property属性
检索或者设置对象中的参与过渡的属性
transition-property: none | all | property;
transition-property:没有属性改变 |所有属性改变（默认）| 元素属性名;
transition-duration
检索或设置对象过渡的持续时间（开始后执行的时间）
transition-duration: time;
time:规定完成过渡效果需要花费的时间（以秒或毫秒计）
ps:transition-duration: 2s;
transition-timing-function
检索或设置对象中过渡的动画类型
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out |step-start | step-end | steps(
[, [ start | end ] ]?) | cubic-bezier( , , , );
参数解释：
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于steps(1, start)
step-end：等同于steps(1, end)
steps(
transition-delay
检索或设置对象延迟过渡的时间（开始前等待的时间）
transition-delay: time;
time:指定秒或毫秒数之前要等待切换效果开始,默认值0；
transition属性
复合属性，检索或设置对象变换时的过渡
transition: property duration timing-function delay;
顺序不可替换。
一个小例子：
做一个鼠标滑过块时，然后块顺时针旋转360°，变为自身的两倍
动画
利用到了人类视觉暂留的原理
animation
animation-name属性
检索或设置对象所应用的动画名称
animation-name: keyframename| none;
keyframename：指定要绑定到选择器的关键帧的名称；
none：指定有没有动画（可用于覆盖从级联的动画）。
animation-duration属性
检索或设置对象动画的持续时间
animation-duration: time;
time是动画执行的时间
animation-timing-function属性
检索或设置对象动画的过渡类型
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(
[, [ start | end ] ]?) | cubic-bezier( , , , );
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于steps(1, start)step-end：等同于steps(1, end)
steps(
cubic-bezier(
animation-delay属性
检索或设置对象动画的延迟时间。
animation-delay: time;
可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0。
animation-iteration-count属性
检索或设置对象动画的循环次数。
animation-iteration-count: infinite |
;
例子：做一个转圈圈的八卦阵
Datalist
animation-direction属性
检索或设置对象动画在循环中是否反向运动。
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
normal：正常方向；
reverse：反方向运行；
alternate：动画先正常运行再反方向运行，并持续交替运行；（依赖于循环）
alternate-reverse：动画先反运行再正方向运行，并持续交替运行。（依赖于循环）
animation-fill-mode属性
规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式。
animation-fill-mode: none | forwards | backwards | both | initial | inherit;
none：默认值。不设置对象动画之外的状态；
forwards：设置对象状态为动画结束时的状态；
backwards：设置对象状态为动画开始时的状态；
both：设置对象状态为动画结束或开始的状态。
animation-play-state属性
指定动画是否正在运行或已暂停。
animation-play-state: paused | running;
paused：指定暂停动画；
running：默认值，指定正在运行的动画。
复合属性
animation属性复合属性。
检索或设置对象所应用的动画特效。
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
需注意：如果只有一个数字时，这个数字不管位置在哪里，它都代表周期时间；如果有两个数字，那么前面的数字时周期时间，后边的数字是延时；
name和duration是必不可少的
@keyframes
关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置。
@keyframes animationname{
keyframes-selector
{
css-styles;
}
}
animationname：必写项，定义animation的名称。
keyframes-selector：必写项，动画持续时间的百分比，0-100%、from (0%)、to (100%)
css-styles：必写项，一个或多个合法的CSS样式 属性
will-change
提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。增强页面渲染性能.
will-change: auto|scroll-position|contents|
| ;
auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。
scroll-position：表示将要改变元素的滚动位置。
contents：表示将要改变元素的内容。