瞭解css3動畫

首先，CSS Animation須要指定動畫一個週期持續的時間，以及動畫效果的名稱。

語法：

animation: animation: name duration timing-function delay iteration-count direction fill-mode play-state;;

說明：

值	說明
animation-name	指定要綁定到選擇器的關鍵幀的名稱
animation-duration	動畫指定須要多少秒或毫秒完成
animation-timing-function	設置動畫將如何完成一個週期
animation-delay	設置動畫在啓動前的延遲間隔。
animation-iteration-count	定義動畫的播放次數。
animation-direction	指定是否應該輪流反向播放動畫。

例如：

 #demo span{
    border-radius: 100%;
    -webkit-animation: rainbow 1s infinite;
    animation: rainbow 1s infinite;
  }

　　咱們在這裏給span添加動畫效果，如：

  @keyframes rainbow {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    25% {
      -webkit-transform: scale(0.9, 0.9);
      transform: scale(0.9, 0.9);
      background: #93e1d7;
    }
    50% {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      margin: 0 3px;
      background: #2FAC9B;
    }
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  }

　　在html中添加，以下：

<div id='demo'><span><span></div>

　　而後在瀏覽器中，咱們會看見以下效果:

 

 

　　而後，咱們能夠思考下，既然獲得了一個這樣的動畫效果，那咱們由多個圓點能夠獲得加載效果。

咱們繼續在上面代碼中修改，html中添加：

<div id="loader-1">
  <span></span><span></span><span></span><span></span><span></span>
</div>

　　css中添加：

 #loader-1 span:nth-child(1) {
    border-radius: 100%;
    -webkit-animation: scale 1s 0.1s infinite;
    animation: scale 1s 0.1s infinite;
  }
  #loader-1 span:nth-child(2) {
    border-radius: 100%;
    -webkit-animation: scale 1s 0.2s infinite;
    animation: scale 1s 0.2s infinite;
  }
  #loader-1 span:nth-child(3) {
    border-radius: 100%;
    -webkit-animation: scale 1s 0.3s infinite;
    animation: scale 1s 0.3s infinite;
  }
  #loader-1 span:nth-child(4) {
    border-radius: 100%;
    -webkit-animation: scale 1s 0.4s infinite;
    animation: scale 1s 0.4s infinite;
  }
  #loader-1 span:nth-child(5) {
    border-radius: 100%;
    -webkit-animation: scale 1s 0.5s infinite;
    animation: scale 1s 0.5s infinite;
  }

　　而後添加對應的動畫效果：

 @-webkit-keyframes scale {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    25% {
      -webkit-transform: scale(0.9, 0.9);
      transform: scale(0.9, 0.9);
      background: #93e1d7;
    }
    50% {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      margin: 0 3px;
      background: #2FAC9B;
    }
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  }
  @keyframes scale {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    25% {
      -webkit-transform: scale(0.9, 0.9);
      transform: scale(0.9, 0.9);
      background: #93e1d7;
    }
    50% {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      margin: 0 3px;
      background: #2FAC9B;
    }
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  }

　　而後咱們繼續在瀏覽器中打開，會看見以下效果：

 

         

綜合上面類容，咱們會發現，css3中動畫效果博大精深，須要咱們不停的學習。