动画 ( animation )

随着浏览器对于 CSS 的支援度提升，现在已经可以透过 CSS 做出许多酷炫的“动画”效果，这篇教学会先从 CSS 的 @keyframes 定义动画影格，逐一介绍 CSS animation 各个样式属性，例如 animation-name、animation-duration、animation-delay、animation-timing-function、animation-direction...等，透过这些动画样式属性实作 CSS 动画。

阅读更多：CSS animation 触发事件、自订 CSS 动画路径 offset、CSS 多重动画的权重与顺序

快速导览：

• @keyframe 定义动画影格
• animation-name 动画名称
• animation-duration 动画持续时间
• animation-iteration-count 动画播放次数
• animation-delay 动画延迟时间
• animation-timing-function 动画速度
• animation-direction 动画播放方向
• animation-fill-mode 动画播放前后模式
• animation-play-state 动画播放或暂停
• animation-composition 动画合成设定
• animation 动画缩写样式

@keyframe 定义动画影格

要使用 CSS 制作动画，必须先透过 @keyframe 定义动画的影格，@keyframe 的基本写法需要包含“name、from、to”三个关键字，基本写法如下：

@keyframes name {
  from {
    樣式: 屬性值;
  }
  to {
    樣式: 屬性值;
  }
}

定义名称关键字 name 时，可使用英文字母大小写、数字、连接线“-”或底线“_”，并有下列几点需要注意：

• 名称开头需为英文字母 ( 可用单一底线开头 )。
• 名称大小写有区别。
• 名称可以加引号、亦可不加引号。
• 如果有两组 @keyframes，同名，以后面的名称为主。
• 不能使用 None 或 initial 作为名称 ( 这两个是 CSS 保留字 )，如果真的要使用，需要使用引号包覆，例如 "None" 或 "initial"。

@keyframes oxxo { ... }
@keyframes "oxxo" { ... }    /* 位於下方，若和上方同名，則會採用這個 */
@keyframes OXXO { ... }      /* 大小寫與 oxxo 不同，屬於完全不同的影格定義 */

@keyframes initial { ... }   /* 不可使用 */
@keyframes None { ... }      /* 不可使用 */
@keyframes "initial" { ... } /* 可以用 */
@keyframes "None" { ... }    /* 可以用 */

下方范例使用 @keyframe 定义了一组名为为 oxxo 的影格，并指定起始的 width 和 height 样式属性值为 50px，结束的 width 和 height 样式属性值为 200px，借着透过 animation-name 执行这组影格，animation-duration 定义这组影格渐变的时间，网页执行后，当鼠标移动到红色方块上方，红色方块就会变大，动画结束后会回复原本的样式设定。

线上展示：https://codepen.io/oxxo/pen/GRVevMr

<!-- HTML 程式碼-->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div{
    width:50px;
    height:50px;
    background:#f00;
  }
  div:hover {
    animation-name: oxxo;   /* 使用 oxxo 影格定義執行動畫 */
    animation-duration: 2s; /* 動畫時間為 2 秒 */
  }
  @keyframes oxxo{
    from{
      width: 50px;
      height: 50px;
    }
    to{
      width: 200px;
      height: 200px;
    }
  }
</style>

除了使用 @keyframe 关键字 from 和 to，也可以使用“百分比”的方式增加动画过程中的关键影格，百分比数值和关键字可以混合使用，关键字 from 等同“0%”，to 等同“100%”，下方范例会使用百分比的方式，在动画过程中加入 33% 与 66% 两组关键影格，网页执行后会看见红色方块先改变 width，再改变 height，最后又会回到原本的大小。

注意，关键影格的 0% 必须要有“%”单位。

线上展示：https://codepen.io/oxxo/pen/XWvGaeG

<!-- HTML 程式碼-->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div{
    width:50px;
    height:50px;
    background:#f00;
  }
  div:hover {
    animation-name: oxxo;
    animation-duration: 4s;
  }
  @keyframes oxxo{
    from, to{
      width: 50px;
      height: 50px;  /* 因為 from 和 to 內容相同，可使用 CSS 的寫法寫在一起 */
    }
    33% {
      width: 200px;
      height: 50px;  /* 如果沒有寫這一段，則會出現 0% 到 66% 的高度變化 */
    }
    66% {
      width: 200px;
      height: 200px;
    }
  }
</style>

如果省略了 from、0% 或 to、100%，就会使用元素“原本的样式”替代，下方的范例省略了 from 和 to，产生的结过就与上方范例完全相同。

线上展示：https://codepen.io/oxxo/pen/GRVevOr

<!-- HTML 程式碼-->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div{
    width:50px;
    height:50px;
    background:#f00;
  }
  div:hover {
    animation-name: oxxo;
    animation-duration: 4s;
  }
  @keyframes oxxo{
    33% {
      width: 200px;
      height: 50px;  /* 如果沒有寫這一段，則會出現 0% 到 66% 的高度變化 */
    }
    66% {
      width: 200px;
      height: 200px;
    }
  }
</style>

注意，能够在动画效果中加入补间动画数值的样式属性，需要具备能“计算”的属性值，例如颜色、位置、尺寸、角度、透明度...等，如果是使用“关键字”作为属性值的样式，则无法加入补间动画效果，例如 none、solid、dashed...等，此外，若支援动画的样式使用 auto、max-content 等关键字作为属性值 ( 或不设定任何属性值 )，也会无法顺利产生补间动画 ( 或产生不如预期的效果 )。

下方范例使用 max-content 和 auto 作为属性值，会产生不如预期的效果 ( 结束时区块消失 )。

线上展示：https://codepen.io/oxxo/pen/zYgbdPQ

<!-- HTML 程式碼-->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div{
    width: max-content;  /* 使用 max-content */
    height: auto;        /* 使用 auto */
    background:#f00;
  }
  div:hover {
    animation-name: oxxo;
    animation-duration: 4s;
  }
  @keyframes oxxo{
    33% {
      width: 200px;
      height: 50px;
    }
    66% {
      width: 200px;
      height: 200px;
    }
  }
</style>

animation-name 动画名称

animation-name 表示“动画名称”的样式属性，没有继承特性，这个样式属性会执行“特定名称的影格定义”，是操作 CSS 动画时的“必要”样式属性，需要注意使用时名称“不能加上引号”。

div {
  animation-name: oxxo;
}
@keyframes oxxo{
  50% {background: green;}
}

animation-duration 动画持续时间

animation-duration 表示“动画持续时间”的样式属性，换句话说就是“from 到 to”要经过的时间，没有继承特性，使用非负值的数值，数值需要搭配“s”( 秒 ) 或“ms”( 1/1000 秒、毫秒 ) 等时间单位，是操作 CSS 动画时的“必要”样式属性。

div {
  animation-name: oxxo;
  animation-duration: 1s;  /* 動畫總時長 1 秒 */
}
@keyframes oxxo{
  50% {background: green;}
}

animation-iteration-count 动画播放次数

animation-iteration-count 表示“动画播放的次数”，默认值为 1 次，没有继承特性，如果设定为 infinite 动画就会无止尽的播放下去。

div {
  animation-name: oxxo;
  animation-duration: 1s;
  animation-iteration-count: 2;  /* 播放兩次 */
}
@keyframes oxxo{
  50% {background: green;}
}

animation-delay 动画延迟时间

animation-delay 表示“动画延迟时间”，没有继承特性，需要搭配“s”( 秒 ) 或“ms”( 1/1000 秒、毫秒 ) 等时间单位，如果没有设定或将其设为 0s，动画就会直接播放不会延迟。如果将延迟播放时间设定为“负值” ( 例如 -1s、-2s )，就会产生“快转”的效果，假设一段动画持续时间为 5 秒，animation-delay 设定为 -2s，动画将会直接从第二秒的位置开始播放，播放三秒后停止 ( 5-2=3 )。

下方范例有三个不同颜色的方块，都套用同样的 oxxo 影格定义，动画也都设定为持续 5 秒，但是蓝色的 animation-delay 设为 2s，红色的 animation-delay 设为 -2s，绿色则完全不设定 animation-delay，执行后蓝色会慢两秒移动，红色会直接跳到已经移动两秒的地方再开始移动，绿色则是一开始就移动。

线上展示：https://codepen.io/oxxo/pen/MWNxvrz

<!-- HTML 程式碼-->
<h2>滑鼠移動到我上方開始動畫</h2>
<div class="r"></div>
<div class="g"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 50px;
    height: 50px; 
    margin: 10px;
  }
  h2:hover~div{
    animation-name: oxxo;
    animation-duration: 5s;
  }
  .r{
    background: #f00;
    animation-delay: -2s;  /* 快轉 */
  }
  .g{background: #0a0;}
  .b{
    background: #00c;
    animation-delay: 2s;   /* 延遲 */
  }

  @keyframes oxxo {
    from {margin-left: 10px;}
    to {margin-left: 200px;}
  }
</style>

animation-timing-function 动画速度

animation-timing-function 表示“动画的速度”，默认值为 ease，没有继承特性，这个样式属性可以让动画播放的“每个关键影格之间”具有“加速、减速、平缓加速、线性移动”等速度变化，根据“W3C CSS Easing Functions Level 1”的说明，共有下列几种属性值：

下方范例会让不同的 div 从左移动到右再从右移动到左，从中可以观察不同动画速度的效果。

线上展示：https://codepen.io/oxxo/pen/mdNoMXR

<!-- HTML 程式碼-->
<h2>滑鼠移動到我上方看效果</h2>
<h3>linear</h3><div></div>
<h3>ease-in</h3><div></div>
<h3>ease-out</h3><div></div>
<h3>ease-in-out</h3><div></div>
<h3>ease</h3><div></div>
<h3>step-start</h3><div></div>
<h3>step-end</h3><div></div>
<h3>steps(5, jump-start)</h3><div></div>
<h3>steps(5, jump-end)</h3><div></div>
<h3>steps(5, jump-none)</h3><div></div>
<h3>steps(5, jump-both)</h3><div></div>

<!-- CSS 程式碼 -->
<style>
  h2 {border: 2px solid #000;}
  h2:hover~div {
    animation-name: oxxo;
    animation-duration: 5s;
  }
  h3 {
    margin:5px;
    width: 190px;
    height: 30px;
    float:left;
    clear: both;
    text-align: right;
  }
  div {
    float:left;
    width: 30px;
    height: 30px;
    margin:5px;
    background: red;
  }
  div:nth-of-type(1) {animation-timing-function: linear;}
  div:nth-of-type(2) {animation-timing-function: ease-in;}
  div:nth-of-type(3) {animation-timing-function: ease-out;}
  div:nth-of-type(4) {animation-timing-function: ease-in-out;}
  div:nth-of-type(5) {animation-timing-function: ease;}
  div:nth-of-type(6) {animation-timing-function: step-start;}
  div:nth-of-type(7) {animation-timing-function: step-end;}
  div:nth-of-type(8) {animation-timing-function: steps(5, jump-start);}
  div:nth-of-type(9) {animation-timing-function: steps(5, jump-end);}
  div:nth-of-type(10) {animation-timing-function: steps(5, jump-none);}
  div:nth-of-type(11) {animation-timing-function: steps(5, jump-both);}

  @keyframes oxxo{
    50% {margin-left: 200px;}
  }
</style>

除了使用默认的动画速度，也可以使用 CSS 内建函数 cubic-bezier 设定“客制化的动画速度”，cubic-bezier 是一个可调整的“贝兹曲线”，总共有四个参数，分别是第一个贝兹曲线控制点 p1 的座标 (x1, y1) 和第二个贝兹曲线控制点 p2 的座标 (x2, y2) ( 参考 Cubic Bézier )。

透过线上工具“cubic-bezier.com”可以使用视觉化的方式，拖拉这两个控制点，调整控制点之后，上方就会看见这个动画速度的写法。

下方范例会透过 cubic-bezier，产生四种有趣的动画速度，从中可以看到当设定值超过范围时，甚至会产生超过原本边界的特殊效果。

线上展示：https://codepen.io/oxxo/pen/qBevXoE

<!-- HTML 程式碼-->
<h2>滑鼠移動到我上方看效果</h2>
<h3>cubic-bezier(.24,1.19,.68,-0.07)</h3><div></div>
<h3>cubic-bezier(.96,.34,0,.73)</h3><div></div>
<h3>cubic-bezier(.46,-0.75,.18,1.49)</h3><div></div>
<h3>cubic-bezier(.41,.86,.55,2.08)</h3><div></div>

<!-- CSS 程式碼 -->
<style>
  h2 {border: 2px solid #000;}
  h2:hover~div {
    animation-name: oxxo;
    animation-duration: 5s;
  }
  h3 {
    margin:5px;
    width: 290px;
    height: 30px;
    float:left;
    clear: both;
    text-align: right;
  }
  div {
    float:left;
    width: 30px;
    height: 30px;
    margin:5px;
    background: red;
  }
  div:nth-of-type(1) {animation-timing-function: cubic-bezier(.24,1.19,.68,-0.07);}
  div:nth-of-type(2) {animation-timing-function: cubic-bezier(.96,.34,0,.73);}
  div:nth-of-type(3) {animation-timing-function: cubic-bezier(.46,-0.75,.18,1.49);}
  div:nth-of-type(4) {animation-timing-function: cubic-bezier(.41,.86,.55,2.08);}

  @keyframes oxxo{
    50% {margin-left: 200px;}
  }
</style>

如果熟练 steps 的用法，就能够很简单的使用“sprite 图片”来做动画，sprite 图片就是将许多图案集合成一张图，接着透过 CSS 的语法使这些图案分别呈现在网页里，大幅减少多张图片加载的 request 数量，下方范例会使用一张经典的 sprite 图片 ( Leland Stanford 所拍摄 )，透过 CSS 动画的 steps 就能让图片中的马儿跑起来。

图片下载：Leland Stanford 马儿图

线上展示：https://codepen.io/oxxo/pen/jOgJLzK

<!-- HTML 程式碼-->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 186px;
    height: 141px; 
    background-image: url("https://steam.oxxostudio.tw/download/css/animation-horse.jpg");
    animation-name: oxxo;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: step-start;  /* 使用 step-start */
  }

  @keyframes oxxo{
    0% {background-position: -15px -13px;}
    6.25% {background-position: -210px -13px;}
    12.5% {background-position: -403px -13px;}
    18.75% {background-position: -592px -13px;}
    25% {background-position: -15px -165px;}
    31.25% {background-position: -210px -165px;}
    37.5% {background-position: -403px -165px;}
    43.75% {background-position: -592px -165px;}
    50% {background-position: -15px -320px;}
    56.25% {background-position: -210px -320px;}
    62.5% {background-position: -403px -320px;}
    68.75% {background-position: -592px -320px;}
    75% {background-position: -15px -470px;}
    81.25% {background-position: -210px -470px;}
    87.5% {background-position: -403px -470px;}
    93.75% {background-position: -592px -470px;}
    100 %{background-position: -592px -470px;}
  }
</style>

animation-direction 动画播放方向

animation-direction 表示“动画播放方向”的样式属性，没有继承特性，有下列几种属性值：

下方范例会展示这四种播放方向的效果。

线上展示：https://codepen.io/oxxo/pen/qBevXYd

<!-- HTML 程式碼-->
<h2>滑鼠移動到我上方看效果</h2>
<h3>normal</h3><div></div>
<h3>reverse</h3><div></div>
<h3>alternate</h3><div></div>
<h3>alternate-reverse</h3><div></div>

<!-- CSS 程式碼 -->
<style>
  h2 {border: 2px solid #000;}
  h2:hover~div {
    animation-name: oxxo;
    animation-duration: 2s;
    animation-iteration-count: 4;
  }
  h3 {
    margin:5px;
    width: 190px;
    height: 30px;
    float:left;
    clear: both;
    text-align: right;
  }
  div {
    float:left;
    width: 30px;
    height: 30px;
    margin:5px;
    background: red;
  }
  div:nth-of-type(1) {animation-direction:normal;}
  div:nth-of-type(2) {animation-direction:reverse;}
  div:nth-of-type(3) {animation-direction:alternate;}
  div:nth-of-type(4) {animation-direction:alternate-reverse;}

  @keyframes oxxo{
    0% {margin-left: 5px;}
    100% {margin-left: 200px;}
  }
</style>

animation-fill-mode 动画播放前后模式

animation-fill-mode 表示“动画播放前后模式”的样式属性，也就是动画完成后要停留在哪个样式，没有继承特性，有下列几种属性值：

下方范例会展示这四种动画播放前后模式的差异，可观察结束后的位置和颜色。

线上展示：https://codepen.io/oxxo/pen/WNVmEJJ

<!-- HTML 程式碼-->
<h2>滑鼠移動到我上方看效果</h2>
<h3>none</h3><div></div>
<h3>forwards</h3><div></div>
<h3>backwards</h3><div></div>
<h3>both</h3><div></div>

<!-- CSS 程式碼 -->
<style>
  h2 {border: 2px solid #000;}
  h2:hover~div {
    animation-name: oxxo;
    animation-duration: 2s;
    animation-iteration-count: 3;
    animation-direction: alternate;
  }
  h3 {
    margin:5px;
    width: 100px;
    height: 30px;
    float:left;
    clear: both;
    text-align: right;
  }
  div {
    float:left;
    width: 30px;
    height: 30px;
    margin:5px;
    background: green;
  }
  div:nth-of-type(1) {animation-fill-mode: none;}
  div:nth-of-type(2) {animation-fill-mode: forwards;}
  div:nth-of-type(3) {animation-fill-mode: backwards;}
  div:nth-of-type(4) {animation-fill-mode: both;}

  @keyframes oxxo{
    0% {
      background: red;
      margin-left: 5px;
    }
    100% {
      background: cyan;
      margin-left: 200px;
    }
  }
</style>

animation-play-state 动画播放或暂停

animation-play-state 表示“动画播放或暂停”的样式属性，可以透过这个样式属性控制动画播放或暂停，没有继承特性，有下列两种属性值：

下方范例执行后，当鼠标移动到上方的按钮，下方的动画就会暂停，鼠标移开之后动画就会继续。

线上展示：https://codepen.io/oxxo/pen/abeMyKo

<!-- HTML 程式碼-->
<h2>滑鼠移動到我上方看效果</h2>
<div></div>

<!-- CSS 程式碼 -->
<style>
  h2 {
    width: 300px;
    border: 2px solid #000;
  }
  h2:hover~div {
    animation-play-state: paused; /* 滑鼠移動上去時，暫停動畫 */
  }
  div {
    width: 50px;
    height: 50px;
    margin:5px;
    animation-name: oxxo;
    animation-duration: 2s;
    animation-iteration-count: infinite; /* 動畫無限播放 */
    background: red;
  }

  @keyframes oxxo{
    50% {
      background: cyan;
      margin-left: 200px;
    }
  }
</style>

animation-composition 动画合成设定

animation-composition 表示“动画与样式属性的合成关系”，这个样式属性可以*设定套用动画的选择器，与动画中出现相同样式属性时，针对该样式属性数值进行取代或叠加的方式，且只针对属性值为“数值”的样式属性才有作用，具有下列的属性值：

属性值的 add 和 accumulate 虽然都是叠加效果，但 add 表示在原本的属性值的状态下进行叠加，accumulate 则是只会在动画中属性值的位置进行叠加，这种特性只有在“多重属性值”才会有明显的差异，下方范例将几个不同的 h2 分别套用 transform: translateX(30px) rotate(45deg) 样式，a、b、c 是套用动画组，a1、a2、a3 是实际套用样式的非动画效果，最后重叠再一起会呈现紫色效果，从中可以看出 add 和 accumulate 对于最终结果影响的差异。

线上展示：https://codepen.io/oxxo/pen/ByNxMVo

<!-- HTML 程式碼-->
<h4>原始位置</h4>
<h4 class="a">replace</h4>
<h4 class="a1">replace 對照</h4>
<h4 class="b">add</h4>
<h4 class="b1">add 對照</h4>
<h4 class="c">accumulate</h4>
<h4 class="c1">accumulate 對照</h4>

<!-- CSS 程式碼 -->
<style>
  h4 {
    position: fixed;
    width: 100px;
    height: 15px;
    top: 50px;
    left: ㄅ0px;
    border: 1px solid #000;
    font-size: 10px;
    background: #00f4;
  }
  .a, .b, .c {
    background: #f005;
    transform: translateX(30px) rotate(45deg);
    animation: oxxo 1s forwards linear;
  }
  .a {animation-composition: replace;}
  .a1 {transform: translateX(200px);}   /* .a 最後位置 */

  .b {animation-composition: add;}
  .b1 {transform: translateX(30px) rotate(45deg) translateX(200px);}   /* .b 最後位置，注意順序 */

  .c {animation-composition: accumulate;}
  .c1 {transform: translateX(30px) translateX(200px) rotate(45deg);}   /* .c 最後位置，注意順序 */

  @keyframes oxxo {
    0% {transform: translateX(100px);}
    100% {transform: translateX(200px);}
  }
</style>

这种合成设定也可用于“多重动画”，下方的例子同时有两组动画作用于 transform，如果使用默认设定值，transform 会被最后一组动画覆盖而只呈现旋转效果，但套用 add 或 accumulate 之后，就会使用不同的叠加方式进行叠加。

线上展示：https://codepen.io/oxxo/pen/yyNjZEX

<!-- HTML 程式碼-->
<h4>原始位置</h4>
<h4 class="a">replace</h4>
<h4 class="a1">replace 對照</h4>
<h4 class="b">add</h4>
<h4 class="b1">add 對照</h4>
<h4 class="c">accumulate</h4>
<h4 class="c1">accumulate 對照</h4>

<!-- CSS 程式碼 -->
<style>
  h4 {
    position: fixed;
    width: 100px;
    height: 15px;
    top: 50px;
    left: 10px;
    border: 1px solid #000;
    font-size: 10px;
    background: #00f4;
  }
  .a, .b, .c {
    background: #f005;
    transform: translateX(30px) rotate(45deg);
    animation: oxxo 1s forwards linear, oxxo2 1s forwards linear; /* 套用雙重動畫 */
  }
  .a {animation-composition: replace;}
  .a1 {transform: rotate(135deg);}     /* .a 最後位置 */

  .b {animation-composition: add;}
  .b1 {transform: translateX(30px) rotate(45deg) translateX(200px) rotate(135deg);}  /* .b 最後位置，注意順序 */

  .c {animation-composition: accumulate;}
  .c1 {transform: translateX(30px) translateX(200px) rotate(45deg) rotate(135deg);}  /* .c 最後位置，注意順序 */

  @keyframes oxxo {
    0% {transform: translateX(100px);}
    100% {transform: translateX(200px);}
  }
  @keyframes oxxo2 {
    0% {transform: rotate(45deg);}
    100% {transform: rotate(135deg);}
  }
</style>

animation 动画缩写样式

元素套用动画效果时，为了避免 CSS 程序码过于冗长，有时会使用缩写的 animation 样式属性，使用时只需要将动画的个别样式写在后方，除了动画持续时间和延迟时间有顺序 ( 持续时间, 延迟时间 )，其他关键字排列没有顺序之分，但仍需注意“动画名称”不要与特殊关键字相同，下方所列出的写法都是合乎规规则的写法：

注意，animation-composition 不属于缩写的属性范围，要独立撰写。

div {
  animation: 1s oxxo;                       /* 持續時間 1s */
  animation: oxxo 1s;                       /* 持續時間 1s */
  animation: 1s 0.5s oxxo;                  /* 持續時間 1s，延遲時間 0.5s */
  animation: 1s ease-in infinite oxxo;      /* 持續時間 1s，使用 ease-in，無限重複  */
  animation: 1s oxxo 0.5s ease-in infinite; /* 持續時間 1s，延遲時間 0.,5s，使用 ease-in，無限重複 */
  animation: 1s ease-in 3 backwards oxxo;   /* 持續時間 1s，使用 ease-in，重複三次，backwards 模式 */
}

下方的范例使用 animation 让四个 div 呈现不同的动画效果。

线上展示：https://codepen.io/oxxo/pen/KKOEvex

<!-- HTML 程式碼-->
<h2>滑鼠移動到我上方看效果</h2>
<h3>animation: 2s oxxo</h3><div></div>
<h3>animation: 2s 0.5s ease-in oxxo</h3><div></div>
<h3>animation: 4 1s oxxo ease-in</h3><div></div>
<h3>animation: 1s 1s oxxo 3 both ease-out</h3><div></div>

<!-- CSS 程式碼 -->
<style>
  h2 {border: 2px solid #000;}
  h3 {
    margin:5px;
    height: 30px;
  }
  div {
    width: 30px;
    height: 30px;
    margin:5px;
    background: red;
  }
  h2:hover~div:nth-of-type(1) {animation: 2s oxxo;}
  h2:hover~div:nth-of-type(2) {animation: 2s 0.5s ease-in oxxo;}
  h2:hover~div:nth-of-type(3) {animation: 4 1s oxxo ease-in;}
  h2:hover~div:nth-of-type(4) {animation: 1s 1s oxxo 3 both ease-out;}

  @keyframes oxxo{
    50% {
      background: cyan;
      margin-left: 200px;
    }
  }
</style>

小结

animation 是一个非常好用的 CSS 样式属性，随着浏览器的进步，目前几乎所有的浏览器都支援 CSS 动画功能，只要熟悉相关的语法，相信一定可以做出非常酷炫的动画效果。

阅读更多：CSS animation 触发事件、自订 CSS 动画路径 offset、CSS 多重动画的权重与顺序

意见反馈