Home Web CSS
  • transition 讓我們可以在給定的時間內平滑的改變屬性的值。
  • 要呈現 transition 效果，必須達成兩件事:
    1. 要添加效果的 CSS 屬性
    2. 效果的持續時間

NOTE: 如果沒有給定持續時間， transition 將不會有效果，因為 default 值為 0。

Example 1link
div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s;
}
div:hover {
   width: 300px; 
}
Example 2link
div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s, height 4s;
}
div:hover {
    width: 300px;
    height: 300px;
}
Transition + Transformationlink
div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s, height 2s, transform 2s
}
div:hover {
    width: 300px;
    height: 300px;
    transform: rotate(180deg);
}
# Speed curve of Transition
transition-timing-function 指定了 transition 效果的速度曲線。
Value
  • ease - default(slow start, then fast, then end slowly).
  • linear - same speed from start to end.
  • ease-in - slow start.
  • ease-out - slow end.
  • ease-in-out - slow start and end.
  • cubic-bezier(n, n, n, n) lets you define your own.
Example
https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_speed
# Transition Delay
transition-delay 可以指定效果的延遲 (in seconds)。
Examplelink
/* 1 second delay before starting */
div {
    transition-delay: 1s;
}