本文介绍和动画相关的两个属性。

transition(过渡)

描述一个属性由一个状态过渡到另外一个状态;

.trantion-thing {
  transition: color 2s 100ms;
}

• 次数: 执行一次;
• 粒度: 可以对多个属性生效;
• 兼容: 即时动画不生效也不影响动作的终始状态;

.transtion-thing {
  transition:
    $props
    $duration
    $timing-function (optional)
    $transition-delay (optional)
}

animation(动画)

相比 transition, animation 比 transition 多了个执行次数的属性;

.animated-thing {
  animation: black-to-white 1s linear 1;
}

@keyframes black-to-white {
  0% { background: #000; }
  100% { background: #fff; }
}

注意 animation 最后的一个数字 1, 其表示执行次数, 如果不传该值, 默认为 1。来看下 animation 的几个属性

.animated-thing {
  animation:
    $name                       (相比 transition 独有)
    $duration
    $timing-function (optional)
    $animation-delay (optional)
    $iteration-count (optional) (相比 transition 独有)
}

• 动画 animation
  • 调用动画: animation:name 要与 @keyframes 连用;
  • 设置动画播放时间: animation-duration: 2s 完成从 0% 到 100% 一次动画所需时间;
  • 设置动画播放方式: animation-timing-function。step() 逐帧效果; 此外还有 linear、ease 等线性效果, 也可以使用 cubic-bezier; (记忆方法: 可将 ease 理解成 slow, slow in 就是减速, slow out 就是加速;)
  • 设置动画开始播放的时间: animation-delay;
  • 设置动画播放次数: animation-iteration-count: infinate(无限次);
  • 设置动画播放方向: animation-direction: normal(默认)、alternate (偶数次反方向播放);
  • 设置动画的播放状态: animation-play-state: running(默认)、paused(暂停效果); 借由该属性可以完成鼠标移动移出时的暂停、播放效果;
  • 设置动画时间外属性: animation-fill-mode: none/forwards/backwords/both;

行走的猫

when to use Transition or Animation

现阶段理解: Animation 的可控粒度比 Transition 更为细致, transition 可以实现的效果 animation 都能实现。然后有以下几种动效必须使用 animation。

1. 需重复执行的动画;
2. 需要改变方向的动画;
3. 需要暂停/继续执行的动画;

一些案例

• 缓动效果: 小球落地: 涉及到弹框效果的动画, 可以参考此节;
• 打字效果: 如果是单行的打字效果可以使用 css 进行实现, 思路借助 animaition 的 step 以及文本的宽度;

缓动算法

• 缓动算法, 有时间进行 read。

transition 属性使用坑点

在变化前后的两个位置上, 改变布局相关属性会使动画失效。比如 display、text-align。