CSS自學筆記（14）:CSS3動畫效果

在CSS3中也新增了一些可以對元素建立動畫處理的屬性。經過這些新增的屬性，咱們能夠實現元素從一種樣式變換成另外一種樣式時爲元素添加動態效果，咱們就能夠取代網頁中的動態圖片、flash動畫和JavaScript了。

CSS3中新增的動畫效果的屬性以及主流瀏覽器支持狀況

屬性	瀏覽器支持
transition	IE	Firefox	Chrome	Safari(-webkit-)	Opera
@keyframes	IE	Firefox	Chrome(-webkit-)	Safari(-webkit-)	Opera
animation	IE	Firefox	Chrome(-webkit-)	Safari(-webkit-)	Opera

注：

• IE9以及更早版本不支持這三個新增屬性。
• 在Safari瀏覽器中，須要加(-webkit-)前綴。
• 在Chrome瀏覽器中，@keyframes和animation屬性須要加(-webkit-)前綴。

transition屬性

屬性	描述	默認值
transition	簡寫，用於在一個屬性中設置四個過渡屬性。	無
transition-property	定義過渡效果的 CSS 屬性的名稱。	無
transition-duration	定義過渡效果所用時間。	0
transition-timing-function	定義過渡效果的時間曲線。	ease
transition-delay	定義過渡效果開始時間。	0

下面是一個簡單的CSS樣式

img {
    width: 90px;
    height: 90px;
    transition-property: width, height, transform;
    transition-duration: 1s, 1s, 1s;
    transition-timing-function: ease-in-out, ease-in, ease-out;
    transition-delay: 1s, 1s, 0s;
}
img:hover{
    width: 200px;
    height: 200px;
    transform: rotate(90deg);
}

實現效果是當鼠標懸浮在元素(img)上時，他的寬度、高度和方向會發生變化，過渡時間都爲1s，過渡方式分別爲ease-in-out, ease-in和ease-out，旋轉效果會馬上執行，而高寬操做會在1s後變化。

當鼠標移出元素所在範圍時，它會逐漸變回原來的樣式。

咱們也能夠transition簡寫來完成定義上面的樣式：

img {
    width: 90px;
    height: 90px;
    transition:width 1s ease-in-out 1s, height 1s ease-in 1s, transform 1s ease-out 0s; ;
}
img:hover{
    width: 200px;
    height: 200px;
    transform: rotate(90deg);
}

咱們還能夠經過@keyframes規定來建立動畫規則，一般用在較爲複雜而又無需用到False動畫和JavaScript的地方。

例以下面一個簡單的動畫效果

動畫效果

部分CSS樣式代碼爲：

#my_animate {
    width: 60px;
    height: 60px;
    background: #060;
    color: #fff;
    position: relative;
    font: bold 12px '微軟雅黑';
    padding: 20px 10px 0px 10px;
    animation: my_animate 5s infinite;
}
@keyframes my_animate {
 0%   {transform: rotate(0deg);left:0px;}
 25%  {transform: rotate(90deg);left:0px;}
 50%  {transform: rotate(0deg);left:400px;}
 55%  {transform: rotate(0deg);left:400px;}
 70%  {transform: rotate(-30deg);left:400px;background:#ff9;color:#000;}
 100% {transform: rotate(-360deg);left:0px;}
}

使用@keyframes建立動畫時，須要綁定一個選擇器。建立動畫時至少要定義動畫的名稱和動畫的時長，這樣便可將@keyframes建立動畫綁定到相應的選擇器上。

若在建立動畫時沒有定義時長，那麼就會取默認值0，就不會執行動畫效果。

animation屬性以及說明

屬性	描述	說明
@keyframes	建立動畫規則
animation	定義動畫簡寫屬性	除了 animation-play-state 屬性
animation-name	定義 @keyframes 動畫的名稱
animation-duration	定義動畫完成一個週期所花費時間(秒或者毫秒)	默認值：0
animation-timing-function	定義動畫的速度曲線	默認值 ：ease
animation-delay	定義動畫什麼時候開始	默認值 ：0
animation-iteration-count	定義動畫被播放的次數	默認值 ：1
animation-direction	定義動畫是否在下一週期逆向地播放	默認值 ：normal
animation-play-state	定義動畫是否正在運行或暫停	默認值 ：running
animation-fill-mode	定義對象動畫時間以外的狀態

上面的定義的動畫效果是一個週期5s，而且進行無限次的循環播放。在@keyframes中規定了動畫的6各階段的樣式，最終造成一個簡單的動畫效果。