css3 div跳动动画_CSS理论实践之《动画》

基础知识

常见的css3动画一般有补间动画（又叫“关键帧动画”）和逐帧动画两种：

1. 补间动画(关键帧动画): 自动完成从起始状态到终止状态的的过渡。不用管中间的状态。

常用于实现位移、颜色（透明度）、大小、旋转、倾斜等变化。一般有Transitions和Keyframes animation两种方法实现。

• Transition：用于实现简单的动画，只有起始两帧过渡。多用于页面的交互操作，使交互效果更生动活泼。
• Keyframes animation：用于实现较为复杂的动画，一般关键帧较多。animation的timing-function设置为ease、linear或cubic-bezier，它会在每个关键帧之间插入补间动画，产生具有连贯性的动画。

1. 逐帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

逐帧动画可用于loading动画，但更多的用于Sprite精灵动画（人物运动）。精灵动画把所有帧都放在一起，通过CSS3的animation控制background-position。

• 关键帧之间的跳跃，animation的timing-function这时应该使用steps()过渡方式。

Transition

共有以下4个属性：

1. transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
2. transition-duration: 1s;过渡的持续时间。
3. transition-timing-function: linear;运动曲线。属性值可以是：

• linear 线性
• ease 减速
• ease-in 加速
• ease-out 减速
• ease-in-out 先加速后减速

1. transition-delay: 1s;过渡延迟。多长时间后再执行这个过渡动画。

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

Keyframes animation

定义动画步骤：

1. 通过@keyframes定义动画；
2. 将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
3. 在指定元素里，通过 animation 属性调用动画。

animation的子属性有:

• animation-name: 必填项