animation 动画

页面的动画并不完全需要借助 JS，CSS 就能完成，要使用 CSS animation 动画，首先要定义 @keyframes 规则，它用来创建动画，然后使用 animation 属性将动画规则绑定至某个元素上，动画便产生了。

@keyframes 可以使用“from”到“to”的形式，也就相当于动画从“0%”到“100%”的效果转变。

  1. @keyframes color-animation {
  2.     from {
  3.       background-color: #FFB5BF;
  4.     }
  5.     to {
  6.       background-color: #94E8FF;
  7.     }
  8. }

animation 用来定义动画的属性，它通常有以下的属性值可设置：

  • animation-name：对应于 @keyframes 定义的动画名称；
  • animation-duration：定义动画完成的时间，默认是 0，单位可以是秒或毫秒；
  • animation-timing-function：定义动画的速度曲线，默认是 ease，即低速开始，然后加快，最后变慢；
  • animation-delay：动画延迟时间，默认是 0，即立刻执行；
  • animaiton-iteration-count：播放次数，默认是 1，设置为 infinite 则循环播放；
  • animation-direction：动画是否在下一周期逆向播放，默认是 normal，即正常播放；
  • animation-fill-mode：规定动画时间之外的状态，设置为 forwards 可以在动画完成后，保留在最后一帧。

我们把上面颜色改变的例子使用上：

  1. .box {
  2.     animation: color-animation 2s ease-in;
  3.     animation-fill-mode: forwards;
  4. }

animation 动画 - 图1
（颜色变换动画）

常见的 loading 效果也可以用 animation 来制作，如下图：

animation 动画 - 图2
（loading 效果）

制作 loading 效果，我们先来给出大致框架，它是一个静态的圆。

  1. <div class="loading"></div>
  1. .loading {
  2.     width: 50px;
  3.     height: 50px;
  4.     display: inline-block;
  5.     border: 5px solid #ddd;
  6.     border-left-color: #FFB5BF;
  7.     border-radius: 50%; 
  8. }

animation 动画 - 图3
（一个静态的圆）

然后我们给它加上动画：

  1. .loading {
  2.     animation: loading-animation 1.2s linear infinite;
  3. }
  4. @keyframes loading-animation {
  5.     0% {
  6.       transform: rotate(0deg);
  7.     }
  8.     100% {
  9.       transform: rotate(360deg);
  10.     }
  11. }

一个正在加载的动画便完成了，你可以把它用在内容尚未加载出来的提示里，对于提升用户体验很有用。