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;
height: 400px;
background-color: beige;
}
}
/* 百分比方式 */
@keyframes anim1{
0% {
width: 150px;
}
25% {
width: 300px;
}
50% {
width: 150px;
}
100% {
width: 300px;
}
}