iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 27
2
Modern Web

前端新手村系列 第 27

前端新手村 Animations (前傳)

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻

前言

網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字,成為比較有系統性的視野。

讓一開始接觸網頁前端的新手們,有一個比較友善的系統來架構你的學習,至於技術本身的深入探討,就留給其它的高手們吧。

Animations (前傳)

不是只有 Start Wars 才有前傳,Animation 也要來一下前傳。

前傳介紹「Animations 像 Transition 的部份」

Animations 和 Transition 很像。但是卻不完全一樣,今天先來談談如何快速上手 Animation ,如何在熟悉 Transition 的情況之下,可以快速的上手 Animation。又為何要使用?

在這一部份,先介紹它最簡單的部份,當作 強大的 Transition 使用要怎麼用?

animation 快速上手

語法

animation: 動畫名稱 持續時間

沒錯就是這麼簡單,我們複習一下 transition 來看看差在哪?

transition: CSS屬性 持續時間;

差在 原本指定要 transition 的CSS屬性,改成 animation 的「動畫名稱」。
「動畫名稱」指的是,設定的 @keyframe 的命名,指定要改變的 CSS屬性 就寫放置在這。[1]

@keyframe 快速上手

語法

@keyframe 動畫名稱 {
    from {
        CSS 屬性: 值
    }
    to {
        CSS 屬性: 值
    }
}

在使用 transition 時,直接寫在每個 Selector 裡的 CSS 屬性,在 animation 時,搬到了一個叫 @keyframes 的獨立區塊。

何時使用?

使用 transition 時,往往都是用在 CSS Selector 轉換之間,需要顯示中間的過渡畫面。

  1. Selector 通常不會自動觸發(除非使用 JS 的 setInterval() 之類的計數器),必須要透過「互動」才會觸發。例如: 滑鼠點擊/移動、鍵盤輸入...之類的。
  2. 過渡畫面的顯示次數,通常只有 1 次

但是 animation 並沒有這方面的限制。

  1. animation 可以控制播放次數,而且可以擁有 CSS 時,就開始播放。
  2. 設定播放 animation 的次數。

看個比較的例子

先用 transition 做看看

<input type="checkbox"> 移動 box
<div class="box"></div>
.box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  position: relative;
  left: 0px;
  transition: left .3s;
}

input:checked + .box {
  left: 30px;
}

  1. 觸發(換 CSS )的方式: click
  2. 次數 always 1次/click

animation 做看看 1

載入時,播放 10 次

只要改 CSS,將屬性 改成 @keyframe 的名稱
並且將要動畫的屬性 left ,放到動畫播放的位置

.box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  position: relative;
  left: 0px;
  /* transition: left .3s; */
  animation: movebox .3s 10;
}

@keyframes movebox {
  /* input:checked + .box {*/ 
  50% {
    left: 30px;
  }  
}

  1. 觸發方式: 畫面載入,擁有 animation 就會動
  2. 次數: 10次

animation 做看看 2

載入 時,播放 10 次

.box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  position: relative;
  left: 0px;
}

input:checked + .box {
   animation: movebox .3s 10;
}

@keyframes movebox {
  50% {
    left: 30px;
  }  
}

常見的雷

如果想要「混用 transitionanimation 」呢?

可以!! 但,其實不建議,如果使用到相同的屬性時, animation 顯得強勢多了。

transition 的權重,是依照 CSS Cascade 的方式。
但是 animation 卻是超越這一切(甚至是 !important 的權重),獨立而強加的渲染 animation 設定的屬性。

一樣設定一個 box
在點擊 checkbox 時,box 的 animation 會搖十下。
hover 時,box 的 transition 會下降 30px 並且變紅色。

.box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  position: relative;
  left: 0px;
  top: 10px;
  transition: .3s;
}

.box:hover {
  top: 30px;
  background-color: #f00;
}

input:checked + .box {
   animation: movebox .3s 10;
}

@keyframes movebox {
  0%, 100% {
    top: 10px;
  }
  50% {
    left: 10px;
  }
}

實際測試結果發現。

  • 相同屬性的 top 在動畫播放時間,就算 hover box 還是吃 animationtop: 10px ,一直持到十搖完,才吃得到 transitiontop: 30px;
  • 不同屬性的 background 不管是不是在動畫播放時間,都會在 hover 時,讓 box 變紅色。

參考資料

[1]: 3. Animations - w3.org


上一篇
前端新手村 @import 開心的結構化 CSS
下一篇
前端新手村 Animations (上)
系列文
前端新手村30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
小艾 ( Cami )
iT邦新手 5 級 ‧ 2018-01-06 11:02:08

transition CSS屬性 持續時間;

少了 ‘:’ 喲~

Andy Tsai iT邦新手 5 級 ‧ 2018-01-06 11:07:12 檢舉

哈哈哈,好恐怖阿,每天校稿

互相咩~

Chris iT邦新手 4 級 ‧ 2018-01-06 11:17:51 檢舉

感謝,這是互相進步的動力呀~總是會不小心漏了什麼。還好有夥伴呀

我要留言

立即登入留言