OneYoung

Appearance

Animation 意为动画。

CSS3 中的动画相较于传统的 JavaScript 脚本实现动画技术，有三个主要优点:

  1. 能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。
  2. 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。
  3. 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

动画包括两个部分：用于指定动画开始、结束以及中间点样式的关键帧和描述动画的样式规则。

11-1.keyframes ​

在 CSS3 中，我们使用 @keyframes 来定义关键帧。

譬如：

css
@keyframes animate {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(400px);
  }
}

以上关键帧，定义了 3 个节点。

动画执行后，会在 0%、50%、100% 移动到对应位置。

TIP

在 0% 和 100% 之间可以自定义足够多的节点。

开始节点和结束节点，还可以使用下述别名：

css
@keyframes animate {
  from {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  to {
    transform: translateX(400px);
  }
}

11-2.animation ​

CSS3 中的 animation 实际上是一系列属性的简写形式。

按顺序列举如下：

  • animation-name 动画名
  • animation-duration 动画执行时间
  • animation-timing-function 动画执行函数
  • animation-delay 动画延迟时间
  • animation-fill-mode 动画执行结束后的应用模式
  • animation-iteration-count 动画执行次数
  • animation-direction 动画执行方向

另外，CSS3 中还提供了 animation-play-state 属性来控制动画暂停或者是启动。

11-2-1.animation-name ​

animation-name 用来定义动画名。

它的值需要设定为对应关键帧 @keyframes 的属性名。

譬如，我们在上例中声明了 @keyframes animate 后：

css
.target {
  animation-name: animate;
}

但仅仅设置了 animate-name，是不会有效果的。

我们需要设定 animation-duration，也就是说，animation 的正常执行，至少有俩个属性 animation-name 和 animation-duration。

11-2-2.animation-duration ​

animation-duration 用来设置动画执行时间。

譬如，下述语法表明动画执行是 2s:

css
.target {
  animation-name: animate;
  animation-duration: 2s;
}

11-2-3.animation-timing-function ​

animation-timing-function 用来设置动画函数。

根据实际的效果可分为两类：连续变化、断续变化。

其中连续变化有以下属性：

  1. linear 匀速变化，默认值
  2. ease 缓慢变化
  3. ease-in 缓慢进入
  4. ease-in-out 缓慢进入、缓慢离开
  5. ease-out 缓慢离开
  6. cubic-bezier(x1, y1, x2, y2) 贝塞尔曲线

断续变化有以下属性：

  1. steps(<number>, <position>) 其中，position 可设定为 start 或 end。
  2. step-start 相当于 steps(1, start)
  3. step-end 相当于 steps(1, end)

11-2-4.animation-delay ​

animation-delay 用来设置动画延迟时间。

譬如设定延迟 2s 后执行：

css
.target {
  animation-delay: 2s;
}

11-2-5.animation-fill-mode ​

animation-fill-mode 用来设置动画执行结束后的应用模式。

  • none 以元素本身样式为准
  • forwards 以元素动画的最后一次关键帧为准
  • backwards 以元素动画的第一次关键帧为准
  • both 动画将遵循 forwards 和 backwards 的规则，从而在两个方向上扩展动画属性

譬如下例，设置为 forwards 后，元素在执行完动画之后，会以最后一次关键帧的状态为主：

11-2-6.animation-iteration-count ​

animation-iteration-count 用来设置动画执行次数。

可设定的值有：

  1. <number> 设置为一个数字，代表执行固定次数
  2. infinite 执行无穷次

11-2-7.animation-direction ​

animation-direction 用来设置动画执行方向。

可设定的值有：

  1. normal 正向执行
  2. alternate 交替执行
  3. alternate-reverse 反向交替执行
  4. reverse 反向执行 100% => 0%

ps.animation-play-state ​

animation-play-state 用于设置暂停动画或开始动画。

可设定的值有：

  1. paused 暂停
  2. running 启动

该属性并不属于 animation 的简写属性之一。

更多的情况下，我们会利用 JavaScript 脚本更改改属性来控制动画的执行：

11-3.帧动画 ​

帧动画，指的是 animation-timing-function 设置为 steps。

类似于现代的动画片或者电影，都是一帧一帧的联动，形成视觉效果。

而且断续变化 steps 相比连续变化 linear，在某些场景下更合适。

11-3-1.loading ​

譬如本例中的两种 loading 形式，明显第二种更符合网络加载中的效果：

11-3-2.Twitter点赞效果 ​

Twitter 上的点赞效果，就可以利用雪碧图结合帧动画来实现：