1.transition過渡
- 1.指定元素
transition: 1s height, 1s width; - 2.延遲
transition: 1s height, 1s 1s width;
// 上面代碼指定滓鸠，width在1秒之后再開始變化习勤，也就是延遲（delay）1秒
- 3.狀態(tài)變化速度
- ease：慢-快-慢（默認）
- linear：勻速
- ease-in：加速
- ease-out：減速
- cubic-bezier函數(shù)：自定義速度模式演示
語法
// 完整寫法
transition: 1s 1s height linear;
// 常用寫法
transition: 1s;
注意transition一般加在原始元素上绞铃，不要加在hover，active等狀態(tài)上孽椰，不然只針對某種狀態(tài)委粉。
2.animation動畫
定義動畫
- 0%可以用from代表茎辐，100%可以用to代表
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
// 相當于
@keyframes rainbow {
from { background: #c00 }
50% { background: orange }
to { background: yellowgreen }
}
- 如果省略某個狀態(tài)叫挟，瀏覽器會自動推算中間狀態(tài)
@keyframes rainbow {
50% { background: orange }
to { background: yellowgreen }
}
@keyframes rainbow {
to { background: yellowgreen }
}
- 可以把多個狀態(tài)寫在一行
@keyframes pound {
from，to { transform: none; }
50% { transform: scale(1.2); }
}
動畫參數(shù)
- animation-fill-mode 動畫結(jié)束時的狀態(tài)
- none：默認值昼激，回到動畫沒開始時的狀態(tài)
- forwards：讓動畫停留在結(jié)束狀態(tài)
- backwards：讓動畫回到第一幀的狀態(tài)
- both: 根據(jù)animation-direction（見后）輪流應用forwards和backwards規(guī)則
- animation-direction動畫循環(huán)的方式
- normal默認值
- alternate
- reverse
-
alternate-reverse
具體參照下圖
animation-direction.png
常用的值是normal和reverse庇绽。瀏覽器對其他值的支持情況不佳，應該慎用橙困。
動畫語法
div:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}
// 相當于
div:hover {
animation-name: rainbow;
// 動畫名稱
animation-duration: 1s;
// 持續(xù)時間
animation-timing-function: linear;
// 動畫狀態(tài)
animation-delay: 1s;
// 動畫延遲
animation-fill-mode:forwards;
// 動畫結(jié)束狀態(tài)
animation-direction: normal;
// 動畫循環(huán)方式
animation-iteration-count: 3;
// 動畫循環(huán)次數(shù)瞧掺，設為infinite則為無限循環(huán)
}
steps函數(shù)
用于實現(xiàn)逐幀動畫
div:hover {
animation: 10s rainbow infinite steps(10,start);
}
動畫將被分成10幀來播放，而不是平滑過渡凡傅。第二個參數(shù)默認為end辟狈，可設置為start。
動畫暫停
animation-play-state
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
