CSS_@keyframes用法

Posted on Edited on In

要怎麼用「@keyframes」在 CSS 寫動畫效果呢？

教學網址

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

我的codepen練習

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

Definition and Usage

  • 用@keyframes來跟「選擇器」產生連結
  • @keyframes 中，是用來寫「動畫」的程式碼
  • 「動畫」是由 css 樣式「逐漸轉變的過程」來產生的
  • 在動畫期間，css 樣式可以有多次的轉變
  • 可以用“from” “to” 來訂定動畫的開始/結束
  • 也可以用百分比%，來標示動畫期間的時間點
    • “from”就是0%（動畫一開始）
    • “to”就是100%（動畫跑完時）
    • 「在動畫期間的1/4」就是25%

⭐️
小提醒：為了有最佳的瀏覽器支援度，記得一定要寫上「0% 和 100%」時的樣式

  • 在@keyframes中，!important是沒有效用的

  • 在寫 @keyframes 時

CSS Syntax

1
2
3
@keyframes animationname {
	keyframes-selector {css-styles;}
}

animationname

  • Required.
  • 動畫的名稱（自己隨便命名）

keyframes-selector

  • Required.
  • 標示出「動畫期間」的時間點可填入的值有：
    • 0-100%
    • from (same as 0%)
    • to (same as 100%)

在一個 keyframes 中，可以標示出多個時間點

css-styles

  • Required.
  • 填入一個或多個css樣式

加上「兼容各種瀏覽器的前綴詞」

css這樣寫：

1
2
3
4
5
6
7
8
9
10
11
/* 標準寫法 */
@keyframes playbox{
  from{left: 0px;}
  to{left: 300px;}
}

/* 加上safari的前綴詞 */
@-webkit-keyframes playbox{
  from{left: 0px;}
  to{left: 300px;}
}

各式範例

在一個動畫期間，標示出多個時間點

css:

1
2
3
4
5
6
@keyframes funny{
  0%{left: 0;}
  25%{left: 300px;}
  75%{left: 50px;}
  100%{left: 200px;}
}

在一個動畫期間，設定多個css樣式的變化

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
.box{
  width: 100px;
  height: 100px;
  background-color: orange;
/*  設定動畫  */
/*  一定要寫「position: relative;」！！  */
  position: relative;
  animation-name: funny;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  
}

/* 設定多個css樣式的變化 */
@keyframes funny{
  0%{top: 0px; width: 100px;}
  100%{top: 100px; width: 300px; background: purple;}
}

多個時間標示 + 多個css樣式變化

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