CSS過渡動畫的理解

CSS過渡動畫的理解

過分動畫關鍵字【transition】 transition : css屬性 時間 方式 時間 詳細寫就是:

1.transition-property 規定須要過渡的css屬性名稱

2.transition-duration 規定過渡效果須要花費的時間

3.transition-timing-function 規定過渡效果的時間曲線

4.transiity-delay 規定過渡效果開始的時間

各個transition的屬性值

/ transition-property /

transition-property : none|all|屬性列表(多個能夠用逗號分開)

/ transition-duration /

transition-duration : 時間（秒或者毫秒）

/ transition-timing-function /

transition-timing-function :

/*

1.linear : 開始到結束都是一個速度(勻速運動)

2.ease : 從慢速開始，逐漸變快，而後慢速結束(拋物線運動)

3.ease-in : 以慢速開始的過渡

4.ease-out : 以慢速結束的過渡

5.ease-in-out : 慢速開始和結束的過渡

6.cubic-bezier : 在函數中自定義本身的值

*/

/ transition-delay /

transition-delay: 時間(執行過渡開始的時間)

動畫

要建立CSS動畫，須要瞭解keyframes規則和animation屬性。 @keyframes須要規定變化發生的時間，可使用百分好比0%,50%,100%等等，也能夠用from和to表示0%和100%。0%是動畫的開始，100%是動畫的結束。

/ 建立@keyframes規則 from and to/

@keyframes anim{

from {

width: 150px;

height: 150px;

background-color: blue;

}

to {

width: 400px;<br>
height: 400px;<br>
background-color: beige;<br>
} <br>

}

/ 百分比方式 /

@keyframes anim1{

0% {

width: 150px;

}

25% {

width: 300px;

}

50% {

width: 150px;

}

100% {

width: 300px;

}

}