CSS3動畫詳解

標籤：sed   use   alt   keyboard   nim   duration   css3動畫   com   safari   

首先，老阮在他部落格講的很明白了（http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html），這裡我來全面總結一下。

一、transition

　　註：transition需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。就不能是auto之類的值。。。

　　1.提出背景：正因為css之前沒有時間軸，每個動作都是瞬間完成。所以，提出了transition的概念。

　　2.作用：就如單詞字面意思：“過渡，轉變”。

　　3.定義：transition是一個簡寫屬性（transition: property duration timing-function delay;）。

　　　　（1）transition-property 屬性規定應用過渡效果的 CSS 屬性的名稱。（當指定的 CSS 屬性改變時，過渡效果將開始）。

　　　　　　transition-property: none（沒有屬性會獲得過渡效果）|all（所有屬性將獲得過渡效果）|property（過渡效果的屬性，多個時用逗號隔開）;

　　　　例如：指定寬應用過渡。

div{transition-property:width;-moz-transition-property: width; /* Firefox 4 */-webkit-transition-property:width; /* Safari 和 Chrome */-o-transition-property:width; /* Opera */}

　　　　（2）transition-duration屬性規定完成過渡效果需要花費的時間（以秒或毫秒計）。

div{transition-duration: 5s;-moz-transition-duration: 5s; /* Firefox 4 */-webkit-transition-duration: 5s; /* Safari 和 Chrome */-o-transition-duration: 5s; /* Opera */}

　　　　（3）transition-timing-function 屬性規定過渡效果的速度曲線。

　　　　　　transition-timing-function: linear（線性，就是從頭至尾勻速）|ease（慢-快-慢）|ease-in（慢速開始~勻速）|ease-out（勻速~慢速結束）|ease-in-out（慢速開始~勻速~慢速結束）|cubic-bezier(n,n,n,n)（在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。）|steps() 分步執行;

@keyframes animate {  to {    background-position: -3420px;  }}.kai.animate {  animation: animate 0.75s steps(19) infinite;}

　　　　　（4）transition-delay 屬性規定過渡效果何時開始。

div{transition-delay: 2s;-moz-transition-delay: 2s; /* Firefox 4 */-webkit-transition-delay: 2s; /* Safari 和 Chrome */-o-transition-delay: 2s; /* Opera */}

　　4.transition的優點在於簡單易用，但是它有幾個很大的局限。

　　　　（1）transition需要事件觸發，所以沒法在網頁載入時自動發生。

　　　　（2）transition是一次性的，不能重複發生，除非一再觸發。

　　　　（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。

　　　　（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

這就是animation的提出背景>>

二、animation

animation: name（動畫名字或none） duration（動畫用時） timing-function（動畫速度曲線） delay（延遲時間） iteration-count（播放次數） direction（規定是否應該輪流反向播放動畫）;

　　　　1.animation-name 屬性為 @keyframes 動畫規定名稱。

　　　　2.animation-duration屬性規定動畫所花費的時間，預設為o。

　　　　3.animation-timing-function 規定動畫的速度曲線（與transition相同）。

　　　　4.animation-delay 屬性定義動畫何時開始（與transition相同）。

　　　　5.animation-iteration-count 屬性定義動畫的播放次數（n或infinite無線迴圈）。

　　　　6.animation-direction 屬性定義是否應該輪流反向播放動畫（normal正常，alternate輪流反向播放）。

　　　　7.animation-play-state 屬性規定動畫正在運行還是暫停（running動畫正在運行，paused動畫停止）。

　　　　8.animation-fill-mode 屬性規定動畫在播放之前或之後，其動畫效果是否可見。

　　　　　　animation-fill-mode : none （不改變預設行為）| forwards（動畫保持在結束狀態） | backwards （動畫回到第一幀狀態）| both（forwards和backwards兩者都有）;

註：唯寫chrome相容寫法

div{animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */}

　　最後，keyboards定義主要畫面格

@-webkit-keyframes play {}@-moz-keyframes play {}@-ms-keyframes play {}@-o-keyframes play {}@keyframes play {}

　　

CSS3動畫詳解