CSS3动画

[songning0605]

原文链接：千古壹号：css3动画详解
18种loading效果：18种loading效果

css3动画分类

• 过渡 transition

• 转换

  • 2D转换transform
  • 3D转换 transform

• 动画 animation

过渡：transition

transition 中文含义是过渡，主要用来实现元素不同状态间的平滑过渡。俗称 补间动画。

• 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
• 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

transition 是 transition-property, transition-duration, transition-timing-function, transition-delay 的缩写

语法如下：

/** transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间; */
transition: property name | duration | timing function | delay;

• transition-property: all; 如果希望所有的属性都发生过渡，就使用all。

• transition-duration: 1s; 过渡的持续时间。

• transition-timing-function: linear; 运动曲线。属性值可以是：

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

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

demo

2D 转换

转换操作主要是对元素进行 位移、旋转、变形、缩放 操作，配合transition，可以实现动画转换效果

在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换

2D转换包括：缩放、移动、旋转

• 缩放 scale

  transform: scale(x轴缩放倍数, y轴缩放倍数);
  transform: scale(2, 0.5);

• 移动 translate

  transform: translate(水平位移, 垂直位移);
  transform: translate(-50%, -50%);

• 旋转 roate, (roate 结合 transition-origin可以改变旋转中心点)

  transform: rotate(角度);
  transform: rotate(45deg);

  transform-origin

  transform-origin: x-axis y-axis z-axis;

  3D转换（暂时忽略，用的很少）

动画

transform通常用来实现过度的简单动画 animation来实现复杂的动画

1、定义动画的步骤

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

可以看出来，定义动画，类似于定义函数，先定义，后使用，语法如下：

定义动画：
@keyframes 动画名{
  from{ 初始状态 }
  to{ 结束状态 }
}

调用：
  animation: 动画名称 持续时间；

animation属性的格式如下： 详见MDN animation

 animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
 animation: move1 1s  alternate linear 3;
 animation: move2 4s;