animation动画
1.@keyframes 定义关键帧动画
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
注：0% 是动画的开始时间，100% 动画的结束时间。
div{.....动画名称 时间 匀速 循环播放animation: m 0.8s linear infinite;}@keyframes m{50%{transform: rotate(45deg) scale(0.8,0.8);} 表示当时间到达50%时候进行的元素效果80%{transform: rotate(45deg) scale(0.7,0.7);} 表示当时间到达100%时候进行的元素效果}另一种方法：@keyframes m {from {transform: rotate(45deg) scale(0.8,0.8);}to {transform: rotate(45deg) scale(0.7,0.7);}}
模板如下：1.@keyframes 动画名称{10% {...}20% {...}…100%{...}}2.@keyframes m {from {}to {}}
动画效果属性设置：（设置在选择器里面）
案例“div（选择器）{width:100px;height:100px; *宽高background:red; *背景颜色position:relative; *定位animation:m 5s linear infinite; *多个动画属性一起设置 animation-delay:2s; }
2.animation-name 动画名称
3.animation-duration 动画时间
4.animation-timing-function 动画曲线
值：
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数 注：每一步代表一个变化。每一步的时间是平均的举个例子，这个动画共10个变化，则写为steps(10)
5.animation-iteration-count 动画播放次数 n或infinite（循环播放）
6.animation：name duration timing-function delay iteration-count direction；同时设置多个属性
/*动画: 动画名称 时间 匀速 循环播放*/animation: m 2s linear infinite;
7.animation-delay 动画延迟
animation-delay:2s;
8.animation-direction
normal 默认动画结束后不返回
Alternate 动画结束后返回
animation-direction:alternate; *是否应该轮流反向播放动画。如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
animation-play-state 动画状态
值：
paused 停止
running 运动
animation-play-state:paused; *设置这个值以后动画效果将停止
10.animation-fill-mode 动画前后的状态
规定动画在播放之前或之后，其动画效果是否可见。
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应该开始属性值
both 向前和向后填充模式都被应用
animation-fill-mode: forwards;
11.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
12.scale()属性来将元素根据中心原点进行缩放。
缩放scale()方法也有3种情况：
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；
