css3动画？

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

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

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

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

animation-name(必填) //规定动画名称

animation-duration(必填) //完成动画的时间
//值：time(1s.2s…) 默认值为 0，意味着没有动画效果

animation-timing-function(常用) //动画运动的速度
值： linear 匀速
ease(默认) 变速(先慢后快,再由快变慢)
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

animation-delay //动画在启动前的延迟间隔
//值：time 默认值为 0

animation-iteration-count(常用) //动画的播放次数
值：number 默认值1
infinite 动画无限次播放

animation-direction //是否轮流反向播放动画
值: normal 正常
reverse 反向播放
alternate 在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
alternate-reverse 在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

animation-fill-mode(常用) //当动画不播放时当动画完成时.要处于什么状态
值： none 默认，播放完动画后，画面停在起始位置
forwards 播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
backwards 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值

animation-play-state //动画是否正在运行或已暂停
值： paused 指定暂停动画
running 指定正在运行的动画，默认

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