css3中變形與動畫（三）

時間 2019-11-06

標籤 css3 css 變形動畫欄目 CSS 简体版

原文原文鏈接

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

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

1、例子

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

用transition實現方法以下git

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

用animation也能實現相似效果，以下：github

<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，動畫結束。web

可是transition和animation效果仍是有差異的，鼠標hover上去，transition動畫執行完後width保持200px;animation動畫執行完後width回到100px。chrome

固然這只是默認效果，這個動畫完成時的效果也是能夠修改的。ide

修改上面代碼中animation爲工具

animation: 5s enlarge forwards;

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

經過這個例子只是想說，能夠理解爲transition是animation的簡化版，animation能夠作更多的控制，也更強大。下面正式開始介紹。

2、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了。

3、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。下面一一介紹，重點理解加粗的屬性。

一、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

二、animation-duration

語法：

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

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

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

三、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中變形與動畫（二）中的介紹。

四、animation-delay

語法：

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

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

五、animation-iteration-count

語法：

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

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

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

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

六、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

七、animation-play-state

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

參數：

running:running是其默認值，做用是相似於音樂播放器同樣，能夠經過paused將正在播放的動畫停下來，也能夠經過running將暫停的動畫從新播放。

Note:

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

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

paused:暫停播放。

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

例子：仍是上面的例子，加下面代碼便可。

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

八、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爲綠色。

4、綜合實例

【更新於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>