css3中變形與動畫（三）

本文轉載自查看原文 2015-08-03 12:24 8861 html5+css3/ css3/ animation

transform可以實現矩陣變換，transition實現屬性的平滑過渡，animation意思是動畫，動漫，這個屬性才和真正意義的一幀一幀的動畫相關。本文就介紹animation屬性。

animation屬性通過一些關鍵幀中元素屬性的改變來實現動畫效果。當然也可以控制動畫持續時間，動畫迭代次數等。

一、例子

在介紹transition時開篇有一個例子就是實現鼠標放上去，div寬度從100px緩慢增大到200px。

用transition實現方法如下

div:hover{
    width: 200px;
    transition:width 5s ease-in;
}

用animation也能實現類似效果，如下：

<style type="text/css">
div {
    width: 100px;
    height: 100px;
    background-color: red;
}
@keyframes enlarge {
    0% {
        width: 100px;
    }
    50% {
        width: 150px;
    }
    100% {
        width: 200px;
    }
}
div:hover {
    /*width: 200px;    */   
    /*transition:width 5s ease-in;*/
    animation: 5s enlarge;
}
}
</style>
<div></div>

鼠標懸停，動畫持續5s，在時間到一半時div的寬度要從100px達到150px,5s時div寬度達到200px，動畫結束。

但是transition和animation效果還是有差別的，鼠標hover上去，transition動畫執行完后width保持200px;animation動畫執行完后width回到100px。

當然這只是默認效果，這個動畫完成時的效果也是可以修改的。

修改上面代碼中animation為

animation: 5s enlarge forwards;

就可以讓動畫執行完后停在最后一幀。這個forwards是animation-fill-mode的值，后面會詳細講。

通過這個例子只是想說，可以理解為transition是animation的簡化版，animation可以做更多的控制，也更強大。下面正式開始介紹。

二、keyframes

keyframes意思是“關鍵幀”，在關鍵幀會改變元素屬性的計算值。

keyframes語法：

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
keyframes-blocks: [ keyframe-selectors block ]* ;
keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

綜合寫法：

 @keyframes IDENT {
     from {
       Properties:Properties value;
     }
     Percentage {
       Properties:Properties value;
     }
     to {
       Properties:Properties value;
     }
   }
   或者全部寫成百分比的形式：
   @keyframes IDENT {
      0% {
         Properties:Properties value;
      }
      Percentage {
         Properties:Properties value;
      }
      100% {
         Properties:Properties value;
      }
    }

可見keyframes寫法是這樣的：由"@keyframes"開頭，后面緊跟這個“動畫的名稱”加上一對花括號“{}”，括號中是一些不同時間段的樣式規則，規則寫法同css樣式。

一個“@keyframes”中的樣式規則是由多個百分比構成的，如"0%"到"100%"之間，可以在一個規則中創建多個百分比，分別在每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種不斷變化的效果，比如說移動、改變元素顏色、位置、大小、形狀等。

兩個關鍵字，"from"和"to"表示一個動畫從哪開始，到哪結束，也就是"from"相當於"0%"，而"to"相當於"100%"。

Note：0%中的%不能省略，省略則整個keyframes語法錯誤，整條規則無效，因為keyframes的單位只接受百分比值。

工作中有遇到壓縮工具yui compressor把css3中的0%壓縮成0導致動畫失效的情況。所以css如果壓縮盡量寫成from，to避免這種問題。【update:2016-08-02】

舉例：W3C官網的實例,下面介紹animation時會用到這段代碼。

 @-webkit-keyframes 'wobble' {
     0% {
        margin-left: 100px;
        background: green;
     }
     40% {
        margin-left: 150px;
        background: orange;
     }
     60% {
        margin-left: 75px;
        background: blue;
     }
     100% {
        margin-left: 100px;
        background: red;
     }
  }

keyframes定義每一幀的動畫，但只寫keyframes是沒用的，需要調用才能生效。那怎樣調用就用到animation了。

三、animation

animation沒有事件觸發時，在頁面加載后顯式的隨着時間變化來改變元素css樣式，從而產生動畫效果。

元素是怎樣調用animation和keyframes的呢？

舉例：調用上面寫好的wobble動畫。

 .demo1 {
     width: 50px;
     height: 50px;
     margin-left: 100px;
     background: blue;
     -webkit-animation-name:'wobble';/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/
     -webkit-animation-duration: 10s;/*動畫持續時間*/
     -webkit-animation-timing-function: ease-in-out; /*動畫頻率，和transition-timing-function是一樣的*/
     -webkit-animation-delay: 2s;/*動畫延遲時間*/
     -webkit-animation-iteration-count: 10;/*定義循環次數，infinite為無限次*/
     -webkit-animation-direction: alternate;/*定義動畫方式*/
  }

到此，如果前面看過transition應該已經明白animation也是個復合屬性。

animation包含下面屬性： animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-play-state和animation-fill-mode。下面一一介紹，重點理解加粗的屬性。

1、animation-name

animation-name是最關鍵的了，表示應用哪個幀動畫。

語法：

animation-name: none | IDENT[,none | IDENT]*;

默認值：none，即默認情況沒有動畫效果。

animation-name屬性調用@keyframes定義好的動畫，必須和"@keyframes"定義的動畫名稱完全一致（區分大小寫）。

舉例：animation配合矩陣變換中的平移做一個有意思的小動畫。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>變形與動畫</title>
<style type="text/css">
@keyframes around{
  0% {
    transform: translateX(0);
  }
  25%{
    transform: translateX(180px);
  }
  50%{
     transform: translate(180px, 180px); 
  }
  75%{
    transform:translate(0,180px);
  }
  100%{
    transform: translateY(0);
  }
}
div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 100%;
  animation-name:around;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count:infinite;
}
</style>
</head>
<body>
    <div>
        <span></span>
    </div>

</body>
</html>

View Code

2、animation-duration

語法：

animation-duration: <time>[,<time>]*

默認值為0，意味着動畫時長0，即沒有動畫效果（如果值為負值被視為0）。

animation-duration定義播放動畫持續的時間，也就是完成從0%到100%一次動畫所需要的時間。單位s。

3、animation-timing-function

語法：

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

animation-timing-function屬性用來設置動畫播放方式。詳情可參考css3中變形與動畫（二）中的介紹。

4、animation-delay

語法：

animation-delay:<time>[,<time>]*

animation-delay定義事件觸發到動畫開始執行的時間，即延時。

5、animation-iteration-count

語法：

animation-iteration-count: infinite | <number> [, infinite | <number>]*

animation-iteration-count屬性用來定義動畫的播放次數。

默認值為1，即動畫從開始到結束只播放一次。

值為infinite，動畫將會無限次播放。

6、animation-direction

語法：

animation-direction:normal | alternate [, normal | alternate]*

animation-direction設置動畫播放方向。

屬性：

normal:默認值，如果值為normal時，動畫每次循環都是向前播放。

alternate：奇數次播放動畫是按順序播放各幀動畫，偶數次播放動畫是按逆序播放各幀動畫。

這個alternate還是很有用的，我寫了一個例子，可以感受一下alternate效果。

例子：div尺寸由小到大，然后由大到小。

<style type="text/css">
 @-webkit-keyframes 'testAnimationDirection' {
     0% {
        width: 50px;
     }
     20% {
        width: 100px;
     }
     40% {
        width: 150px;
     }
     60% {
        width: 200px;
     }
     80% {
        width: 250px;
     }
     100% {
        width: 300px;
     }
  }
    div{
     width: 50px;
     height: 50px;
     border:1px solid red;
     -webkit-animation-name:'testAnimationDirection';
     -webkit-animation-duration: 10s;
     -webkit-animation-timing-function: ease-in-out; 
     -webkit-animation-delay: 0s;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-fill-mode:backwards;
  }
</style>
<div></div>

View Code

7、animation-play-state

animation-play-state用來控制元素動畫的播放狀態。

參數：

running:running是其默認值，作用是類似於音樂播放器一樣，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放。

Note:

這里的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。

如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態。

paused:暫停播放。

這個很有用，讓動畫在鼠標懸停時暫停，離開時繼續播放。

例子：還是上面的例子，加下面代碼即可。

  div:hover{
      animation-play-state:paused;
  }

8、animation-fill-mode

animation-fill-mode規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用的樣式。

有四個屬性值：

none：默認值，動畫執行前后不改變元素的任何樣式。就是說動畫在第一個關鍵幀播放之前不影響元素，最后一個關鍵幀播放完后停止影響元素。

forwards:動畫完成后呆在最后一幀，就是保持結束時的狀態。這里的最后一幀取決於animation-direction和animation-iteration-count：

backwards:在animation-delay期間應用第一幀。保持animation-delay，第一幀取法如下：

both:根據animation-direction輪流應用forwards和backwards規則。

Note:forwards和backwards關鍵字都是有s的。

backwards和none的區別

還是上面的例子，只是增加了animation-fill-mode屬性。

<style type="text/css">
 @-webkit-keyframes 'wobble' {
     0% {
        margin-left: 100px;
        background: green;
     }
     40% {
        margin-left: 150px;
        background: orange;
     }
     60% {
        margin-left: 75px;
        background: blue;
     }
     100% {
        margin-left: 100px;
        background: red;
     }
  }
    div{
   width: 50px;
     height: 50px;
     margin-left: 100px;
     background: blue;
     -webkit-animation-name:'wobble';
     -webkit-animation-duration: 10s;
     -webkit-animation-timing-function: ease-in-out; 
     -webkit-animation-delay: 10s;
     -webkit-animation-iteration-count: 10;
     -webkit-animation-direction: alternate;
    /* -webkit-animation-fill-mode:none; /*動畫開始為藍色*/
     -webkit-animation-fill-mode:backwards; /*動畫開始為綠色*/
  }
</style>
<div></div>

animation-fill-mode為none，則動畫開始延時期間div為藍色，backwards則動畫開始延時期間div為綠色。

四、綜合實例

【更新於2015/11/13】

舉一個工作中做的例子：

效果如下，“買完回來領會員”是一個按鈕，會左右晃動吸引用戶注意力。用戶hover上去點的時候動畫停住讓用戶可以點擊，不然點不到哈。

用到的圖片

代碼如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>animation by starof</title>
<style>
body{margin:0;}
.w4{
    height:200px;
    background-color:#ef9b14;
    position: relative;
}
/*絕對定位*/
.w4 .buy-icno{
    position:absolute;
    top:0;
    right:50%;
    margin-right:-472px;
    z-index:5;
}
/*infinite動畫一直重復*/
.w4 .buy-icno{
    -webkit-animation:transform 2.5s linear infinite forwards;
    -moz-animation:transform 2.5s linear infinite forwards;
    -ms-animation:transform 2.5s linear infinite forwards;
    animation:transform 2.5s linear infinite forwards;
}

.w4 .buy-icno:hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -ms-animation-play-state:paused;
    animation-play-state:paused;
}
/*4個時間段，0%到25%，從最低點到左上;25%到50%，從左上到最低點；50%到70%，從最低點到右上;70%到100%,從右上到最低點*/
@-webkit-keyframes transform { 
    0% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    25% {transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
    50% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    75% {transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
    100% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@keyframes transform { 
    0% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    25% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
    50% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
    75% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
    100% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}

</style>
</head>
<body>

<div class="w4">
<a href=""><img class="buy-icno" src="images/buy-icno1.png"></a>
</div>
</body>
</html>