CSS3 动画

优点

在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化
代码相对简单
适用交互动效

缺点

在动画控制上不够灵活
兼容性不好

transition

关注的是 CSS 属性的变化，属性值和时间的关系是一个三次贝塞尔曲线

指定状态变化所需要的时间

transition-duration
transition-delay
transition-property
transition-timing-function
- ease 转件放慢
- linear：匀速
- ease-in：加速
- ease-out：减速
- cubic-bezier函数：自定义速度模式

特点

不是所有的 CSS 属性都支持 transition

transition 需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态

height: auto
display
background

局限

transition 需要事件触发，所以没法在网页加载时自动发生
transition 是一次性的，不能重复发生，除非一再触发
transition 只能定义开始状态和结束状态，不能定义中间状态
一条 transition 规则，只能定义一个属性的变化，不能涉及多个属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transition</title>
    <style>
      img {
        height: 100px;
        width: 100px;
        transition-property: height;
        transition-duration: 1s;
        transition-delay: 1s;
        transition-timing-function: ease;
      }

      img:hover {
        height: 450px;
        width: 450px;
      }
    </style>
  </head>
  <body>
    <img src="http://lorempixel.com/450/450/city" />
  </body>
</html>

animation

作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果

animation-duration

animation-duration CSS 属性设置动画完成一个动画周期所需的时间。
animation-delay

animation-delay CSS 属性指定从应用动画到元素开始执行动画之前等待的时间量。动画可以稍后开始、立即从开头开始或立即开始并在动画中途播放。
animation-name

animation-name CSS 属性指定一个或多个 @keyframes at-rule 的名称
animation-timing-function

animation-timing-function CSS 属性设置动画在每个周期的持续时间内如何进行。

linear | <cubic-bezier-timing-function> | <step-timing-function>
animation-iteration-count

animation-iteration-count CSS 属性设置动画序列在停止前应播放的次数

infinite | <number>
animation-fill-mode 设置结束状态
- forwards 停留动画结束状态
- none 默认值，回到动画没开始时的状态
- backwards 让动画回到第一帧的状态
- both 根据 animation-direction 轮流应用 forwards 和 backwards 规则
animation-direction

animation-direction CSS 属性设置动画是应正向播放、反向播放还是在正向和反向之间交替播放。

normal | reverse | alternate | alternate-reverse
animation-play-state

animation-play-state CSS 属性设置动画是运行还是暂停。

paused、running
@keyframes

关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤。

%、from、to
<cubic-bezier-timing-function> ease | ease-in | ease-out | ease-in-out | cubic-bezier([0,1]>, , [0,1]>, <number>)
<step-timing-function> step-start | step-end | steps([, <step-position>])
<step-position> jump-start | jump-end | jump-none | jump-both | start | end

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation</title>
    <style>
      @keyframes rainbow {
        0% {
          background: #c00;
        }
        50% {
          background: orange;
        }
        100% {
          background: yellowgreen;
        }
      }

      div:hover {
        animation-duration: 1s;
        animation-delay: 1s;
        animation-name: rainbow;
        animation-timing-function: linear;
        animation-iteration-count: 3;
        animation-fill-mode: forwards;
        animation-direction: normal;
        animation-play-state: running;
      }
      div {
        width: 100px;
        height: 100px;
        border: 1px solid #000000;
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

JavaScript 动画

控制能力很强
- 可以单帧的控制、变换
- 复杂控制动画
兼容性好

CSS系列 - 动画

CSS3 动画

优点

缺点

transition

指定状态变化所需要的时间

特点

局限

animation

JavaScript 动画