CSS 动画
定义和用法
1）、一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。
2）、动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色
3）、CSS 中的 transform，transition 和 animation 是分开的三部分内容，其中 transfrom 主要是控制元素变形，并没有一个时间控制的概念，而 transition 和 animation 才是动画的部分，它们可以控制在一个时间段里，元素在两个或以上的状态切换的效果。
4）、基本上我们会有这样的一个简单的概念，CSS 的动画效果由浏览器控制和渲染，理论上比 JavaScript 的动画效果性能好，但是控制上没有 JavaScript 那么灵活方便。
一 、transform 过渡
属性值：
- 位移：
1）、translateX（10px）X轴位移
2）、translateY（10px）Y轴位移
3）、translate（X，Y）如果只有一个参数默认X轴，Y轴为0；
4）、translate3D（X，Y，Z）
div { transform:translate(20px,20px); }
- 旋转：
1）、rotateX（45deg）X轴旋转
2）、rotateY（45deg）Y轴旋转
3）、rotateZ（45deg）Z轴旋转
4）、rotate（45deg）视觉上为Z轴旋转
5）、rotate3D（X，Y，Z，deg）
div { transform:rotate(7deg); }
3.伸缩：
1）、scaleX（2）X轴位移
2）、scaleY（2）Y轴位移
3）、scaleZ（45deg）Z轴伸缩
4）、scale（X，Y）如果只有一个参数默认X轴，Y轴为0；
5）、scale3D（X，Y，Z）
div { transform:scale(1.5,1.5); }
4.倾斜：
1）、skewX（）
2）、skewY（）
3）、skewZ（）
div { transform:skew(20deg,20deg); }
二 、transition触发型动画
```
例：把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：
div{
width:100px;
transition: width 2s;
}
```
属性值：
- transition-duration: 1s； 过渡时间
div { transition-duration: 5s; }
- transition-property:all； 参与过渡动画的属性
div { transition-property:width; }
- transition-delay:0s； 动画延迟执行时间
div { transition-delay:2s; }
- transition-timing-function:linear；
默认：
ease：平滑过渡，快-慢，逐渐变慢
ease-in：平滑过渡，慢-快，加速状态
ease-out：平滑过渡，快-慢，减速状态
ease-in-out：平滑过渡，慢-快-慢
div { transition-timing-function:linear； }
三 、transform-style过渡样式
transform-style:float；平面
transform-style:preserve-3d；立体
四 、animate帧动画
1.定义帧动画：
动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
@keyfranes 动画名称 {
起始帧：0% = from
0%{}
from{}
结束帧：100% = to
100%{}
to{}
例：当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
2.使用帧动画：
animation:动画名称，动画过渡时间,复合属性。
1）. animation-duration: 1s； 动画过渡时间，默认值是 0，意味着没有动画效果
属性值
time：规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。
2）. animation-delay: 0s 动画延迟时间，默认是 0
属性值
time： 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。
3）. animation-timing-function 动画缓动方式，默认是 "ease"
属性值
linear：动画从头到尾的速度是相同的
ease：平滑缓动，快-慢，逐渐变慢
ease-in：平滑缓动，慢-快，加速状态
ease-out：平滑缓动，快-慢，减速状态
ease-in-out：平滑缓动，慢-快-慢
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
4）. animation-iteration-count 动画执行次数，默认是 1
属性值
n：定义动画播放次数的数值。
infinite：规定动画应该无限次播放。
5）. animation-name 动画名称
属性值：
keyframename： 规定需要绑定到选择器的 keyframe 的名称
none： 规定无动画效果（可用于覆盖来自级联的动画）
6）. animation-direction 动画执行方向
属性值：
normal：正常方向
reverse：反方向
7）. animation-play-state 规定动画正在运行还是暂停
属性值：
paused： 规定动画已暂停
running： 规定动画正在播放
8）. animation-fill-mode 规定对象动画时间之外的状态
属性值：
none： 默认值，不设置对象动画之外的状态
forwards： 设置对象状态为动画结束时的状态
backwards： 设置对象状态为动画开始时的状态
both： 设置对象状态为动画结束或开始时的状态
例:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
简写模式：
div
{
animation: myfirst 5s linear 2s infinite alternate;
}