css3动画？

1、css3实现动画有几种方式？

css实现动画主要有3种方式，
第一种是：transition实现渐变动画
第二种是：transform转变动画
第三种是：animation实现自定义动画，下面具体讲一下3种动画的实现方式

1.1transition的中文含义是过渡。

过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

transition 包括以下属性：
transition-property: all; 如果希望所有的属性都发生过渡，就使用all
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。属性值可以是：
linear 线性
ease 减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。

transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;

效果如下：

1.2如果设置 transition-property: all，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡。效果如下：

1.3 transition的局限

transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。

2.Animation

动画可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

1、animation-name 动画名称(必要的)
必须与规则@keyframes配合使用，
1 @keyframes mymove{
2 　　from {background: red;}
3 　　to {background: yellow;}
4 }
5 div{animation‐name:mymove;}

2、animation-duration持续时间(必要的)
1 animation‐duration:3s;

3、animation-timing-function 过渡类型
属性值
linear：线性过渡。
ease：平滑过渡。
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
step-start:马上跳到动画每一结束桢的状态【实现逐帧动画效果】

1 animation‐timing‐function:linear;

4、animation-delay 延迟时间
1 animation‐delay:0.5s;

5、animation-iteration-count 循环次数
属性值infinite：无限循环
number: 循环的次数；默认是1，可以设置其它数值 如：2 3…
1 animation‐iteration‐count:infine;

6、animation-direction 运动方向
属性值
normal：正常方向 0-100%
reverse：反方向运行 100-0%
alternate：动画先正常运行再反方向运行，并持续交替运行 0-100-0%
alternate-reverse：动画先反运行再正方向运行，并持续交替运行 100-0-100%
1 animation‐direction:normal;

7、animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
属性值
none 默认值。延迟之后，执行0%时，里面的效果
backwards 延迟之前，执行0%时，里面的效果
forwards 在动画结束后，停留在动画结束的位置。【重点记忆】
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画初始执行0%，结束停留到结束的
位置。
1 animation‐fill‐mode:forwads;

8、animation-play-state 动画状态
属性值
running:运动
paused: 暂停; 当鼠标经过时动画停止，鼠标移开动画继续执行(一般使用在划过的效果里面)
1 div:hover{animation‐play‐state:paused;}

9、简写animation
animation：动画名称 动画持续时间 过渡类型 延迟时间 循环 运动方向
（ 2个时间：第一个时过渡时间 ；第二个时延迟时间 ）
1 animation：mymove 2s linear 0.5s infine alternate;