Home Web CSS

# CSS - Animation

CSS 允許在不使用 Javascript 或 Flash 的情況下對 HTML 元素進行動畫處理。

# The @Keyframes Rule

當我們在 @keyframes 規則中指定 CSS 樣式時，動畫會在特定時間從目前樣式逐漸變為新樣式。

  • animation-name
  • animation-duration
From - Tolink
/* The animation will last for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow" */
/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
NOTE: animation-duration 定義動畫會花多少時間完成，所以如果沒有指定時間，動畫將不會執行，因為 default 值是 0s。
Percent %link
/* The animation code */
@keyframes example {
    0% {background-color: red; left: 0px; top: 0px;}
    25% {background-color: yellow; left: 200px; top: 0px;}
    50% {background-color: blue; left: 200px; top: 200px;}
    75% {background-color: green; left: 0px; top: 200px;}
    100% {background-color: red; left: 0px; top: 0px;}
}
/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
}
# Delay an Animation
animation-delay 定義動畫延遲開始的時間。
Example 1link
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}
負數也可以執行，動畫會從它像是已經跑了 Ns 開始
Example 2link
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: -2s;
}
# Set How Many Times an Animation Should Run
animation-iteration-count 指定動畫須執行幾次。
Example 1link
/* Example will run the animation 3 times before it stops */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}
Example 2link
/* Example uses the value "infinite" to make the animation continue for ever */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
# Run Animation in Reverse Direction or Alternate Cycles
animation-direction 指定動畫要依什麼方向移動。
The animation-direction values:
  • normal - Default, the animation is played as normal(forwards).
  • reverse - The animation is played in reverse direction(backwards).
  • alternate - The animation is played forwards first, then backwards.
  • alternate-reverse - The animation is played backwards first, then forwards.
Example 1link
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-direction: reverse;
}
Example 2
https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_direction2
Example 3
https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_direction3
# The Speed Curve of the Animation
animation-timing-function 指定動畫的速度曲線。
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_animation_speed
# The fill-mode For an Animation
在播放第一個 @keyframes 之前或播放最後一個 @keyframes 之後，CSS 動畫不會影響元素。 animation-fill-mode 可以覆蓋此行為。
animation-fill-mode 指定動畫未播放時 (開始前、結束後或兩者) 目標元素的樣式。
Value
  • none - Default value. 動畫在執行前後不會對元素應用任何樣式。
  • forwards - 元素將保留最後一個 @keyframes 設置的樣式值 (取決於動畫方向和動畫迭代次數)。
  • backwards - 元素將獲得第一個 @keyframes 設置的樣式值（取決於動畫方向），並在動畫延遲期間保留它。
  • both - 動畫將遵循向前和向後的規則，在兩個方向上擴展動畫屬性。
Example 1
讓元素保留最後一個動畫樣式
Example 2
讓元素獲得最後一個動畫樣式
Example 3
讓元素在動畫開始前獲取第一個設置的樣式，並在動畫結束時保留最後一個樣式
# Animation Shorthand Property
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
div {
    animation: example 5s linear 2s infinite alternate;
}