过渡：就相当于在点击或者滑动等等动作时，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(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>);
参数解释：
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(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数第一个参数：必须为正整数，指定函数的步数第二个参数：取值可是start或end，指定每一步的值发生变化的时间点第二个参数：可选，默认值为end
transition-delay
检索或设置对象延迟过渡的时间（开始前等待的时间）
transition-delay: time;
time:指定秒或毫秒数之前要等待切换效果开始,默认值0；
transition属性
复合属性，检索或设置对象变换时的过渡
transition: property duration timing-function delay;
顺序不可替换。
一个小例子：
做一个鼠标滑过块时，然后块顺时针旋转360°，变为自身的两倍
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
height: 50px;
width: 100px;
margin: 0 auto;
background: yellow;
transition: 2s;
}
div:hover{
transform: rotate(180deg);
width: 200px;
height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画
利用到了人类视觉暂留的原理
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(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>);
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(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
animation-delay属性
检索或设置对象动画的延迟时间。
animation-delay: time;
可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0。
animation-iteration-count属性
检索或设置对象动画的循环次数。
animation-iteration-count: infinite | <number>;
<number>为数字，其默认值为“1”；infinite为无限次数循环。
例子：做一个转圈圈的八卦阵
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datalist</title>
</head>
<style type="text/css">
div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 400px;
width: 400px;
margin: auto;
border-radius: 50%;
border: 1px red solid;
box-sizing: border-box;
border-bottom: 200px red solid;
animation: rotate 5s linear infinite;
}
@keyframes rotate{
from {transform:rotate(0deg)}
to {transform:rotate(360deg);}
}
div:before{
content:'';
display:block;
position:absolute;
width:200px;
height:200px;
border-radius:50%;
left:0;
top:50%;
background-color:red;
background-image:radial-gradient(#fff 10%,red 10%);
}
div:after{
content:'';
display:block;
position:absolute;
width:200px;
height:200px;
border-radius:50%;
right: 0;
top:50%;
background-color:red;
background-image:radial-gradient(red 10%,#fff 10%);
}
</style>
<body>
<div>
</div>
</body>
</html>
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|<custom-ident>|<animateable-feature>;
auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。
scroll-position：表示将要改变元素的滚动位置。
contents：表示将要改变元素的内容。
<custom-ident>：明确指定将要改变的属性与给定的名称。<animateable-feature>：可动画的一些特征值，比如left、top、margin等。
