css3系列之css動畫

github文章地址：https://github.com/yaodebian/blog/issues/1

css3系列之css動畫

css動畫是css3中新添加的特性，爲我們提供了很多很方便的css特效，以前很多需要藉助js(或者gif動效圖)來完成的動畫效果，簡單通過css就能完成。

一.動畫規則

css的動畫的實現分兩步：

• 通過@keyframes設置動畫過渡規則
• 將動畫規則部署到html元素中

首先我們給出一個小示例：

<div id="box"></div>

/* 1.設置動畫  */
@keyframes animation {
  from {background: red;}
  to {background: yellow;}
}

@-webkit-keyframes animation {
  from {background: red;}
  to {background: yellow;}
}

/* 2.部署動畫  */
#box {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  animation: animation 5s;
  -webkit-animation: animation 5s; /* Safari 與 Chrome */
}

二.css3動畫屬性

屬性	描述	css版本號
@keyframes	規定動畫	3
animation	所有動畫屬性的簡寫屬性，除了animation-play-state	3
animation-name	規定@keyframes動畫的名稱	3
animation-duration	規定動畫完成一個週期所花費的秒或毫秒，默認是0	3
animation-timing-function	規定動畫的速度曲線，默認是“ease”	3
animation-fill-mode	規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式	3
animation-delay	規定動畫何時開始，默認爲0	3
animation-iteration-count	規定動畫播放的次數，默認爲1	3
animation-direction	規定動畫是否在下一週期逆向地播放，默認爲“normal”	3
animation-play-state	規定動畫是否正在運行或暫停，默認爲“running”	3

1.@keyframes（關鍵幀）規則
語法：

@keyframes animationname(規則名或者動畫名) {
  
  keyframes-selector(關鍵幀選擇器，用於標記動畫的時間階段){css-styles;}
  
}

規則的設置實際上是設置不同階段下特定css樣式的值，比如之前我們設置的：

@keyframes animation {
  from {background: red;}
  to {background: yellow;}
}

上面的from和to分別代表動畫的開始點和結束點，分別可以用0%和100%來表示，如：

@keyframes animation {
  0% {background: red;}
  100% {background: yellow;}
}

2.animation-name(指定關鍵幀的名稱)
語法：
animation-name: keyframename | none;

值	說明
keyframename	指定要綁定到選擇器的關鍵幀名稱
none	指定沒有動畫(可用於覆蓋從級聯的動畫)

3.animation-duration(指定動畫播放完成花費的時間)
語法：
animation-duration: time;

4.animation-timing-function(動畫速度曲線函數)
語法：
animation-timing-function: value;
animation-timing-function使用的數學函數，稱爲三次貝塞爾曲線，速度曲線。使用此函數，您可以使用您自己的值，或使用預先定義的值之一：

值	描述
linear	從頭到尾的速度是相同的
ease	默認，動畫從低速開始，然後加快，在結束前變慢
ease-in	動畫以低速開始
ease-in-out	動畫以低速結束
cubic–bezier(n, n, n, n)	在cubic-bezier函數中自己的值。可能的值是從0到1的數值

5.animation-fill-mode
animation-fill-mode 屬性規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
默認情況下，CSS 動畫在第一個關鍵幀播放完之前不會影響元素，在最後一個關鍵幀完成後停止影響元素。animation-fill-mode 屬性可重寫該行爲。
語法：
animation-fill-mode: none|forwards|backwards|both|initial|inherit;

值	描述
none	默認值，動畫在動畫執行之前和之後不會應用任何樣式到目標元素
forward	在動畫結束後（由 animation-iteration-count 決定），動畫將應用該屬性值。
backwards	動畫將應用在 animation-delay 定義期間啓動動畫的第一次迭代的關鍵幀中定義的屬性值。這些都是 from 關鍵幀中的值（當 animation-direction 爲 “normal” 或 “alternate” 時）或 to 關鍵幀中的值（當 animation-direction 爲 “reverse” 或 “alternate-reverse” 時）。
both	動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴展動畫屬性。
initial	設置該屬性爲它的默認值
inherit	從父元素繼承該屬性

該css屬性主要的兩個值爲forwards和backwards，還是能夠很簡單地理解的：
forwards表示當動畫結束時，不會消除動畫對HTML的影響，而是會將to關鍵幀中的css樣式應用於元素中；
backwards則相反，動畫延遲期間，會將from關鍵幀中的css樣式應用於元素中(正常情況下)；

6.animation-delay(動畫延遲)
動畫開始階段的延遲時間

7.animation-iteration-count(動畫播放次數)
它有兩種值，一個數字n，或者"infinite"(表示動畫無限次播放)

8.animation-direction(定義動畫播放的方向)
語法：
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

值	描述
normal	默認值，動畫按正常播放
reverse	動畫反向播放
alternate	動畫正向、反向交替播放
alternate-reverse	動畫反向、正向交替播放
initial	設置該屬性爲它的默認值
inherit	從父元素繼承該屬性

9.animation-play-state(指定動畫的運行和暫停狀態)
它僅有兩個值：paused和running

10.animation(所有動畫屬性的縮寫)
語法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state
除了語法格式中的這些值，還有initial和inherit

三.css動畫簡單運用之——實現一個簡單的輪播器

首先，我們先來看下效果圖：

html:

  <div id="carousel-box">
    <!-- 表示圖片順序的索引 -->
    <a id="a1" class="num">1</a>
    <a id="a2" class="num">2</a>
    <a id="a3" class="num">3</a>
    <a id="a4" class="num">4</a>
    <a id="a5" class="num">5</a>
    <!-- 設定爲五張圖片 -->
    <div id="carousel-item">
      <img src="./imgs/1.jpg" alt="">
      <img src="./imgs/3.jpg" alt="">
      <img src="./imgs/4.jpg" alt="">
      <img src="./imgs/5.jpg" alt="">
      <img src="./imgs/2.jpg" alt="">

      <!-- 五張圖片的標題 -->
      <ul id="showTag">
        <li>圖片一</li>
        <li>圖片二</li>
        <li>圖片三</li>
        <li>圖片四</li>
        <li>圖片五</li>
      </ul>
    </div>
  </div>

css:
首先，我們先將整個輪播框的寬度固定爲每張圖片的寬度：

#carousel-box {
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 5px;
  margin: 0 auto;
  overflow: hidden;
}

因爲是通過css來實現輪播的效果，所以我們設定爲5張圖片，並將每張圖片平鋪開來形成一張圖片：

#carousel-item {
  position: absolute;
  width: calc(300px  \*  5);
}

/* 將輪播器中的每張圖片平鋪開來形成一張圖片  */
#carousel-item  img {
  float: left;
  width: 300px;
  height: 200px;
}

調整標題和輪播數字索引的位置：

#showTag {
  position: absolute;
  /* 調整標題項的垂直位置 */
  top: 10px;
  opacity: 0.5;
}

#showTag  li {
  /* 根據圖片寬度來設定標題寬度，並讓標題平鋪以放置在對應的輪播圖片中 */
  width: 200px;
  height: 20px;
  line-height: 20px;
  margin: 0  50px;
  float: left;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  background: #000;
}

/* 設定圖片索引位置 */
.num {
  width: 25px;
  height: 25px;
  color: #666;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  z-index: 10;
  bottom: 10px;
  right: 10px;
  display: block;
  opacity: 0.8;
}

/* 調整索引位置 */
.num:nth-child(4) {
  margin-right: 30px;
}
.num:nth-child(3) {
  margin-right: 60px;
}
.num:nth-child(2) {
  margin-right: 90px;
}
.num:nth-child(1) {
  margin-right: 120px;
}

由於之前我們將圖片平鋪開來放在#carousel-item容器中，故而我們的輪播動態僅僅只要移動#carousel-item容器的位置即可：

/* 初試輪播動畫 */
@keyframes initAnimation {
  /* 0-4s */
  0%, 20% {
    margin-left: 0px;
  }
  /* 4-8s */
  25%, 40% {
    margin-left: -300px;
  }
  /* 8-12s */
  45%, 60% {
    margin-left: -600px;
  }
  /* 12-16s */
  65%, 80% {
    margin-left: -900px;
  }
  /* 16-20s */
  85%, 100% {
    margin-left: -1200px;
    }
}

/* 動畫部署 */
#carousel-item {
  animation: initAnimation 20s ease-out infinite;
}

索引懸浮觸發高亮效果和輪播滾動：

/* 索引懸浮高亮效果 */
.num:hover {
  color: #fff;
  cursor: pointer;
  background: #f00;
}

/* 輪播懸浮暫停效果 */
#carousel-item:hover, .num:hover {
  animation-play-state: paused;
}

/* 索引懸浮觸發動畫 */
@keyframes Anim1 {
  100% {
    margin-left: 0;
  }
}

@keyframes Anim2 {
  100% {
    margin-left: -300px;
  }
}
@keyframes Anim3 {
  100% {
    margin-left: -600px;
  }
}
@keyframes Anim4 {
  100% {
    margin-left: -900px;
  }
}
@keyframes Anim5 {
  100% {
    margin-left: -1200px;
  }
}

/* 索引觸發輪播效果 */
#a1:hover ~ #carousel-item {
  animation: Anim1 .5s ease-out forwards;
}
#a2:hover ~ #carousel-item {
  animation: Anim2 .5s ease-out forwards;
}
#a3:hover ~ #carousel-item {
  animation: Anim3 .5s ease-out forwards;
}
#a4:hover ~ #carousel-item {
  animation: Anim4 .5s ease-out forwards;
}
#a5:hover ~ #carousel-item {
  animation: Anim5 .5s ease-out forwards;
}

不過以上仍有很多缺陷和不足：

• 輪播索引不能實時滾動；
• 索引觸發滾動後不能從當前輪播圖片輪播，而是從第一張圖片開始；