CSS之animation和transition

原創

Koala_HYT

2020-02-20 23:21

CSS3已經火了很久了，它可以代替js實現一些複雜的動畫，代碼簡單，性能好，面試css3經常是重點考點，本章內容主要歸納總結animation和transition的使用和區別。

Transition
Animation
區別

Transition的使用

Transition過渡是元素從一種樣式逐漸改變爲另一種的效果。強調過渡，需要觸發一個事件達到動畫目的。

Transition的屬性介紹：

屬性	解釋
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property	規定應用過渡的 CSS 屬性的名稱。
transition-duration	定義過渡效果花費的時間。默認是 0。
transition-timing-function	規定過渡效果的時間曲線。默認是 “ease”。
transition-delay	規定過渡效果何時開始。默認是 0。

使用：

要實現這一點，必須規定兩項內容：

指定要添加效果的CSS屬性
指定效果的持續時間。

注意：如果未指定的期限，transition將沒有任何效果，因爲默認值是0。

指定的CSS屬性的值更改時效果會發生變化。一個典型CSS屬性的變化是用戶鼠標放在一個元素上時：

div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 1s linear 2s;
	/* Safari */
	-webkit-transition:width 1s linear 2s;
}

div:hover
{
	width:200px;
}

多項改變
要添加多個樣式的變換效果，添加的屬性由逗號分隔：

div
{
	transition: width 2s, height 2s, transform 2s...;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s...;
}

Animation的使用
Animation可以創建動畫，它可以取代許多網頁動畫圖像、Flash 動畫和 JavaScript 實現的效果。

Animation的屬性介紹

@keyframes規則
@keyframes 規則是創建動畫。
@keyframes 規則內指定一個 CSS 樣式和動畫將逐步從目前的樣式更改爲新的樣式。

在 @keyframes 創建動畫，需要把它綁定到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

規定動畫的名稱
規定動畫的時長

div{
	// 動畫名稱，動畫時長
	animation: myAnimation 1s;
}

// @keyframes創建名爲myAnimation的動畫規則
@keyframes myAnimation{
 from{
	background: red;
 }
 to{
 	background: blue;
 }
}

注意: 必須定義動畫的名稱和動畫的持續時間。如果省略的持續時間，動畫將無法運行，因爲默認值是0。

動畫是使元素從一種樣式逐漸變化爲另一種樣式的效果，您可以改變任意多的樣式任意多的次數，請用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to”，等同於 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成。爲了得到最佳的瀏覽器支持，最好始終定義 0% 和 100% 選擇器。

區別

animation	transition
不需要時間觸發，多個關鍵幀，實現自由動畫。由@keyframs控制當前幀屬性，更靈活	強調過渡，需要觸發一個事件達到動畫目的

文獻：
https://www.runoob.com/css3/css3-transitions.html