transition 属性的缺点

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

而 animation 属性都可以解决这些问题，相当于 transition 的增强版。

animatioin

animation 是一个复合属性，是由 animation-name 、 animation-duration 、 animation-timing-funciton 、 animation-iteration-count 、 animation-diretion 、 animation-play-state 、 animation-fill-mode 七个子属性组成。

各个子属性的功能

  1. animation-name: 动画名称（默认值为none）
  2. animation-duration: 持续时间（默认值为0）
  3. animation-timing-function: 时间函数（默认值为ease）
  4. animation-delay: 延迟时间（默认值为0）
  5. animation-iteration-count: 循环次数（默认值为1）
  6. animation-direction: 动画方向（默认值为normal）
  7. animation-play-state: 播放状态（默认值为running）
  8. animation-fill-mode: 填充模式（默认值为none）

一个简单的例子

  1. <style>
  2.  .demo {
  3.   width: 100px;
  4.   height: 100px; 
  5.   animation-name: test;
  6.   animation-duration: 2s;
  7.   animation-timing-function: ease;
  8.   animation-iteration-count: infinite;
  9.   animation-direction: alternate;
  10.   animation-play-state: running;
  11.   animation-fill-mode: none;  
  12.   /* 等价于 animation: test 2s ease 0s infinite alternate running none; */
  13. }
  15. @keyframes test {
  16.   0% {
  17.      background: yellow;
  18.   }
  20.   100% {
  21.     background: pink;
  22.   }
  23. }
  24. </style>
  26. <body>
  27.   <div class='demo'></div>
  28. </body>

animation.gif

keyframes 关键字

animation 制作动画需要两步，首先用关键帧声明动画，然后 animation 调用动画。

关键帧用 keyframes 声明

  1. @ keyframes {
  2.   0% {
  3.         width: 0px;
  4.     }
  6.   100% {
  7.         width: 100px;
  8.     }
  9. }

注意：0% 可以用 from 代替，100% 可以用 to 代替。如果不声明 0% 或 100% 则使用元素的默认状态。

注意：如果声明多个相同的 keyframes 则使用最后一个声明的。

注意：出现负百分数或高于 100% 会被忽略。

animation-name

默认值：none 没有动画效果，或者是 keyframes 声明的动画名。

animation-duration

默认值：0s 没有动画，不能是负值否则动画失效。

单位可以是 ms或 s。

animation-timing-function

默认值：ease

和 transition 差不多也是可以写三种属性值：关键字、steps 函数、贝塞尔曲线。

不过这个可以应用在整个动画期间，也可以在某两个百分比之间。

  1. <style>
  2. .demo{
  3.     width: 100px;
  4.     height: 100px;
  5.     position: relative;
  6.     background-color: pink;
  7.     animation-name: test;
  8.     animation-duration: 5s;
  9.     animation-direction: alternate;
  10.     animation-iteration-count: infinite;
  11. }
  13. @keyframes test{
  14.     0%{left: 0px;animation-timing-function: ease;}
  15.     20%{left: 50px;animation-timing-function: linear;}
  16.     40%{left: 100px;animation-timing-function: ease-in;}
  17.     60%{left: 150px;animation-timing-function: ease-out;}
  18.     80%{left: 200px;animation-timing-function: step-start;}
  19.     100%{left: 250px;animation-timing-function: step-end;}
  20. }
  21. </style>
  23. <body>
  24.   <div class='demo'></div>
  25. </body>

animation-function.gif

animation-iteration-count

默认值：1

可以是 infinite（无限循环）、number（循环次数）。

animation-direction

默认值：normal

  • normal： 正向播放。
  • reverse： 反向播放。
  • alternate： 若动画只播放一次，则和正向播放一样。若播放两次以上，偶数次效果为反向播放。
  • alternate-reverse： 若动画只播放一次，则和反向播放一样。若播放两次以上，偶数次效果为正向播放。

以下是 alternate 的效果，其他属性值做一下实验也知道是怎样的。

  1. <style>
  2.  .demo{
  3.     width: 100px;
  4.     height: 100px;
  5.     position: relative;
  6.     background-color: pink;
  7.     animation-name: test;
  8.     animation-duration: 2s;
  9.     animation-direction: alternate;
  10.     animation-iteration-count: infinite;
  11. }
  13. @keyframes test{
  14.     0%{left: 0px;}
  15.     100%{left: 250px;}
  16. }
  17. </style>
  19. <body>
  20.   <div class='demo'></div>
  21. </body>

animation-direction.gif

animation-delay

默认值：0s。

注意：该延迟是指整个动画的延迟，而不是指每次循环的延迟，只有动画开始时执行一段延迟。

注意：可以是负值，表示动画的起始时间从 0s 变为延迟时间的绝对值。

  1. /* 上面的例子加上这句代码 */
  3. .demo {
  4.     animation-delay: -1s;
  5. }

注意动画开始的位置

animation-delay.gif

animation-play-state

默认值：running。

  • running：播放中。
  • paused：暂停。
  1. <style>
  2. .demo {
  3.   height: 70px;
  4.   width: 300px;
  5.   border: 1px solid red;
  6.   position: relative;
  7. }
  9. .move {
  10.   height: 70px;
  11.   width: 70px;
  12.   background: pink;
  13.   position: absolute;
  14.   animation: test 2s linear 2s infinite alternate;
  15. }
  17. @keyframes test {
  18.   0% {
  19.     left: 0px;
  20.   }
  22.   50% {
  23.     left: 115px;
  24.   }
  26.   100% {
  27.     left: 230px;
  28.   }
  29. }
  30. </style>
  32. <body>
  33. <div class='demo'>
  34.   <div class='move'></div>
  35. </div>
  36.   <button id='trigger'>点击切换播放状态</button>
  37. </body>
  39. <script>
  40. var move = document.getElementsByClassName('move')
  42. var button = document.getElementById('trigger')
  43. button.addEventListener('click', () => {
  44.   var state = move[0].style.animationPlayState
  45.   move[0].style.animationPlayState = state === 'paused' ? 'running' : 'paused'
  46. })
  47. </script>

animation-play.gif

animation-fill-mode

默认值：none

  • none ：默认值，表示动画播放完成后，恢复到初始的状态。
  • forwards： 表示动画播放完成后，保持 keyframes 里最后一帧的属性。
  • backwards： 表示开始播放动画的时候，应用 keyframes 里第一帧的属性，播放完成的时候，恢复到初始状态，通常设置 animation-delay 后，才能看出效果。
  • both： 表示 forwards 和 backwards 都应用。

直接看代码，很难解释。

  1. <style>
  2.     .box{
  3.   position: relative;
  4.   width: 50px;
  5.   height: 50px;
  6.   background-color: deeppink;
  7.   margin-top: 10px;
  8.   animation: mode-a 5s 1 2s;
  9. }
  11. .forwards{
  12.   animation-fill-mode: forwards;
  13. }
  15. .backwards{
  16.   animation-fill-mode: backwards;
  17. }
  19. .both{
  20.   animation-fill-mode: both;
  21. }
  23. @keyframes mode-a {
  24.   from {
  25.     left:0;
  26.     background-color: green;
  27.   }
  28.   to{
  29.     left: 500px;
  30.     background-color: blue;
  31.   }
  32. }
  33. </style>
  35. <body>
  36.   <h3>none</h3>
  37.   <div class="box"></div>
  38.   <h3>forwards</h3>
  39.   <div class="box forwards"></div>
  40.   <h3>backwards</h3>
  41.   <div class="box backwards"></div>
  42.   <h3>both</h3>
  43.   <div class="box both"></div>
  44. </body>

animation-fill-mode.gif

参考：
[1] CSS动画简介
[2] CSS系列——一步一步带你认识animation动画效果
[3] animation