CSS動畫簡介

日期： 2023年2月14日

但是，css動畫除外，它實在太有用了。

本文介紹css動畫的兩大組成部分：transition和animation。我不打算給出每一條屬性的詳盡介紹，那樣可以寫一本書。這篇文章只是乙個簡介，幫助初學者了解全貌，同時又是乙個快速指南，當你想不起某乙個用法的時候，能夠快速地找到提示。

在css 3引入transition（過渡）這個概念之前，css是沒有時間軸的。也就是說，所有的狀態變化，都是即時完成。

上面是乙個演示，當滑鼠放置於縮圖之上，縮圖會迅速變大。注意，縮圖的變大是瞬間實現的。下面是**，相當簡單。

img

img:hover

img

我們還可以指定transition適用的屬性，比如只適用於height。

img

在同一行transition語句中，可以分別指定多個屬性。

img

我們希望，讓height先發生變化，等結束以後，再讓width發生變化。實現這一點很容易，就是為width指定乙個delay引數。

img

delay的真正意義在於，它指定了動畫發生的順序，使得多個不同的transition可以連在一起，形成複雜效果。

transition的狀態變化速度（又稱timing function），預設不是勻速的，而是逐漸放慢，這叫做ease。

img

（1）linear：勻速

（2）ease-in：加速

（3）ease-out：減速

（4）cubic-bezier函式：自定義速度模式

img

transition的完整寫法如下。

img

img

（2）不是所有的css屬性都支援transition，完整的列表檢視這裡，以及具體的效果。

（3）transition需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。比如，height從0px變化到100px，transition可以算出中間狀態。但是，transition沒法算出0px到auto的中間狀態，也就是說，如果開始或結束的設定是height: auto，那麼就不會產生動畫效果。類似的情況還有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

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

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

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

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

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

css animation就是為了解決這些問題而提出的。

首先，css animation需要指定動畫乙個週期持續的時間，以及動畫效果的名稱。

div:hover

@keyframes rainbow 

50% 
100% 
}

div:hover

div:hover

動畫結束以後，會立即從結束狀態跳回到起始狀態。如果想讓動畫保持在結束狀態，需要使用animation-fill-mode屬性。

div:hover

animation-fill-mode還可以使用下列值。

（1）none：預設值，回到動畫沒開始時的狀態。

（2）backwards：讓動畫回到第一幀的狀態。

（3）both: 根據animation-direction（見後）輪流應用forwards和backwards規則。

@keyframes rainbow 

100% 
}

div:hover

div:hover

div:hover

@keyframes rainbow 

50% 
100% 
}

@keyframes rainbow 

50% 
to }

@keyframes rainbow 

to } @keyframes rainbow 
}

@keyframes pound 

50% 
}

div:hover

上面動畫中，如果滑鼠移走，色塊立刻回到動畫開始狀態。

如果想讓動畫保持突然終止時的狀態，就要使用animation-play-state屬性。

div 

div:hover 

也就是說，實際運用中，**必須寫成下面的樣子。

div:hover 

@-webkit-keyframes rainbow 
50% 
100% 
} @keyframes rainbow 
50% 
100% 
}

CSS3動畫簡介

原文 url 參考 color red css3 transform 旋轉屬性 color url color red css3 transition 漸變屬性 color url color red css3 keyframes 規則 color url color red css3 animat...

CSS3 動畫簡介

1.css3動畫 css3動畫簡介 通過改變元素的屬性值來實現動畫效果的。animation實現動畫主要由兩部分組成 通過類似flash動畫的關鍵幀來生明乙個動畫 在animation屬性中呼叫關鍵幀宣告的動畫實現乙個更為複雜的動畫效果 animation屬性的瀏覽器相容性 css3動畫的使用過程 ...

css動畫 幀動畫

動畫 animation 設定關鍵幀 從左上，到右上，到右下的動畫 上面是系統性動畫屬性，下面拆分 animation 綜合性的動畫設定屬性 animation name 動畫名稱 animation duration 動畫的時間週期 animation timing function 動畫變化的速...