2019年7月17日 星期三

[Back To Basic] CSS Transitions

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)可以並用

沒有留言:

張貼留言