css3 動畫（四）animation.css 源碼分析

前言

上一篇 css3 動畫（三）animation 簡介 中只是簡單的介紹了一下 animation 的子屬性，並無真正的使用。在本篇中，經過閱讀 animate.css這個 css 的動畫庫，來加深對
css3 的 animation 屬性的理解。

animate.css

animate.css 是一個具備很是多的動畫效果的 css 動畫庫。動畫效果演示

用法

<h1 class="animated flash">Example</h1>

• 加上基礎類 animated 以及動畫類 flash，就會有 「閃爍」 的動畫效果。

動畫分類

經過查看 演示，能夠看到該動畫庫的動畫類型分爲 14 類：

• Attention Seekers
• Bouncing Entrances
• Bouncing Exits
• Fading Entrances
• Fading Exits
• Flippers
• Lightspeed
• Rotating Entrances
• Rotating Exits
• Sliding Entrances
• Sliding Exits
• Specials
• Zooming Entrances
• Zooming Exits

在 animate.css 的源碼目錄中，也根據其分類分爲了 14 個文件夾：

_base.css 基礎類

首先看 _base.css 中的基礎類：

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  animation-delay: 1s;
}

.animated.delay-2s {
  animation-delay: 2s;
}

.animated.delay-3s {
  animation-delay: 3s;
}

.animated.delay-4s {
  animation-delay: 4s;
}

.animated.delay-5s {
  animation-delay: 5s;
}

能夠看到：
.animate 基礎類設置了動畫的兩個子屬性：animation-duration 和 animation-fill-mode。其值分別爲 1s 和 both。animation-fill-mode 詳解

.animate.infinite 基礎類設置了動畫的播放次數爲無限次

.animated.delay-ns 基礎類設置了動畫的延時

示例：flash 動畫源碼

而後，咱們來看一個動畫例子的源碼：flash.css

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}

在 flash.css 中，首先定義了名爲 flash 的關鍵幀的序列：

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

在 0%、50%、100% 關鍵幀中，其樣式 opacity 爲 0
在 25%、75% 關鍵幀中，其樣式 opacity 爲 1

而後，下面有 .flash 類，使用了 flash 做爲 animation-name 屬性的值，flash 即爲上面定義關鍵幀的名稱

因此，經過添加 flash 類，就能夠使元素具備 「閃爍」 的動畫效果！

總結

經過上面實例的一個 flash 動畫源碼的閱讀，加深了對 css3 animation 屬性的使用。