transform、transition、animation区别

transform、transition、animation分析

transform、transition、animation 是 css3 中与动画有关的三个属性。

transform

• 是静态属性，主要用途是用来做元素的特殊变形
• 语法 => transform： translate(移动)/rotate(旋转)/scale(缩放)/skew(扭曲)/matrix(矩阵-以上属性值的集合)
• 生效条件：一旦写在 css 中就会立刻展示，不会有变化过程
• 用于： 元素的特殊形态

transition

• 对元素的某个属性或多个属性的变化，进行控制。即允许这些属性在一定的时间内平滑过渡。只有两个关键帧，开始和结束
• 语法 => transition: property duration timing-function delay;
• 生效条件： 必须有事件触发，如 hover
• 用于： 简单的 from to 效果

animation

• 对元素的某个属性或多个属性变化，进行控制。可设置多个关键帧（0%~100%）。animation 是通过 keyframes 关键帧来控制。
• 语法 => animation: name iteration-count direction play-state;
• 生效条件： 设置后自动展示动画效果
• 用于： 灵活定制多帧及循环