CSS_animation用法

Posted on Edited on In

在 CSS 使用「animation」寫出自己想要的動畫效果

我的codepen練習

https://codepen.io/saffranwang/pen/bJJPwM

html:

1
<div class="box"></div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.box{
  width: 100px;
  height: 100px;
  background-color: orange;
/*  設定動畫  */
/*  一定要寫「position: relative;」！！  */
  position: relative;
  animation-name: playbox;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: 2;
  animation-direction: reverse;
}

.box:hover{
  animation-play-state: paused;
}

@keyframes playbox{
  from{left: 0px;}
  to{left: 300px;}
}

注意！

  • 一定要寫「position: relative;」！！

  • 在寫 @keyframes 時

animation-name

1
animation-name: playbox;
  • Definition and Usage:

animation-name 後面的名稱，就會對應到@keyframes後面的名稱
The animation-name property specifies a name for the @keyframes animation.

  • CSS Syntax

animation-name: keyframename

  • keyframename

Specifies the name of the keyframe you want to bind to the selector

animation-duration

1
animation-duration: 3s;
  • Definition and Usage:

The animation-duration property defines how long an animation should take to complete one cycle.

animation-duration一定要寫！！否則 duration 就會預設是 0，動畫就不會跑

  • CSS Syntax

animation-duration: time

  • time
    • 設定「動畫跑完一次需要的時間」
    • 單位可以是「秒」或是「毫秒」
    1
    2
    3
    4
    5
    單位：秒
    animation-duration:10s;

    單位：毫秒
    animation-duration:500ms;

animation-timing-function

1
animation-timing-function: ease-in-out;
  • Definition and Usage:

The animation-timing-function specifies the speed curve of an animation.

The speed curve defines the TIME an animation uses to change from one set of CSS styles to another.

The speed curve is used to make the changes smoothly.

  • CSS Syntax

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)

  • The animation-timing-function uses a mathematical function, called the Cubic Bezier curve, to make the speed curve. You can use your own values in this function, or use one of the pre-defined values:
    • linear: The animation has the same speed from start to end
    • ease: Default value. The animation has a slow start, then fast, before it ends slowly
    • ease-in: The animation has a slow start
    • ease-out: The animation has a slow end
    • ease-in-out: The animation has both a slow start and a slow end
    • cubic-bezier(n,n,n,n): Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1

animation-delay

1
animation-delay: 2s;
  • Definition and Usage:

The animation-delay property specifies a delay for the start of an animation.

單位可以是「秒」或是「毫秒」

1
2
3
4
5
單位是「秒」
animation-delay: 2s;

單位是「毫秒」
animation-delay: 2ms;
  • CSS Syntax

animation-delay: time

  • time
    • Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start.
    • Default value is 0.
    • ❗️ 可以填入「負值」
      Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds.
    1
    animation-delay: -2s;

animation-iteration-count （動畫重複次數）

1
animation-iteration-count: 2;
  • Definition and Usage:

The animation-iteration-count property specifies the number of times an animation should be played.

  • CSS Syntax

animation-iteration-count: number|infinite

  • number

A number that defines how many times an animation should be played. Default value is 1

❗️

  • infinite

讓動畫跑無限次
Specifies that the animation should be played infinite times (forever)

1
animation-iteration-count: infinite;

animation-direction

我的codepen練習：https://codepen.io/saffranwang/pen/BEeaQY

1
animation-direction: reverse;
  • Definition and Usage:

The animation-direction property defines whether an animation should be played forwards, backwards or in alternate cycles.（正向、反向、正反交替跑）

  • CSS Syntax

animation-direction: normal|reverse|alternate|alternate-reverse

  • normal

正向跑
Default value. 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

animation-fill-mode

1
animation-fill-mode: forwards;
  • Definition and Usage:

The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.

  • CSS Syntax

animation-fill-mode: none|forwards|backwards|both

  • none

    • Default value.
    • 在動畫執行前後，都不會給元素加上任何樣式
      Animation will not apply any styles to the element before or after it is executing.

  • forwards

    • 元素會保有「動畫結束前的樣式」
      The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
    • 在此範例中，.box的動畫是「往右位移300px，且背景顏色由橘色變為綠色」。因為加上animation-fill-mode: forwards;，動畫跑完後，.box會維持在這個狀態。範例：https://codepen.io/saffranwang/pen/axrOqX

  • backwards

    • 在動畫開始前（在animation-delay這段期間），元素就可以先拿到「動畫開始時的樣式」
      The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
    • 在此範例中，.box原本是橘色，動畫開始時「背景會是紫色」。原本，要在動畫開始跑才會變紫色，但因為加上animation-fill-mode: backwards;，因此在animation-delay那兩秒鐘，.box也會是紫色的。範例：https://codepen.io/saffranwang/pen/LvoVvY

  • both

    • 元素會「先拿到動畫開始時的樣式」以及「保有動畫結束時的樣式」
      The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
    • 在此範例中，.box原本是橘色，動畫開始時「背景會是紫色」，動畫結束時「背景會是綠色」。因為加上animation-fill-mode: both;，所以「動畫開始前，.box也會先拿到紫色」，「動畫結束後，.box會一直維持紫色」。範例：https://codepen.io/saffranwang/pen/dLEYMM

animation-play-state

1
animation-play-state: paused;
  • Definition and Usage:

The animation-play-state property specifies whether the animation is running or paused.

Note: Use this property in a JavaScript to pause an animation in the middle of a cycle.

  • CSS Syntax

animation-play-state: paused|running

  • paused

    • Specifies that the animation is paused
    • 在此範例中，設定當.box被hover時，動畫會暫停。範例：https://codepen.io/saffranwang/pen/bJJPwM

  • running

    • Default value.
    • Specifies that the animation is running

animation 縮寫法

animation 是下面這些的縮寫：

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

animation-duration一定要寫，否則 duration 會為 0，動畫就不會跑了

縮寫語法順序

1
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

例如：

1
2
3
.box{
  animation: playbox 5s infinite;
}