Transition
指定過場時間,讓屬性時改變的時候更平順。
先決條件
- 決定過場的屬性 e.g. color, width...
- 決定過場的時間 e.g. 2s
*.如果沒有決定過場的屬性,不會有過場的效果,因為過場的時間預設為0秒
*.可以同時指定2個以上要過場的屬性
速度曲線
語法: transition-timing-function
可指定的屬性值,過場簡略分為三部分,開始 / 過程 / 結束
- ease(預設值): 慢 快 慢
- linear: 中 中 中
- ease-in: 慢 中 中
- ease-out: 中 中 慢
- ease-in-out: 慢 漸快 漸慢 慢
- cubic-bezier(n,n,n,n): 自行指定貝茲曲線,決定速度
延遲過場
語法: transition-delay
其他
*.過場(transition)和變形(transform)可以並用
沒有留言:
張貼留言