iT邦幫忙

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

跟著網頁動ㄘ動系列 第 2

DAY2 - 使用CCS3動ㄘ動

今天先從最常使用的CCS3 Animations開始!/images/emoticon/emoticon08.gif


把整個過程設想成這是一齣戲,而你是一名導演及編劇,這樣會比較好理解。/images/emoticon/emoticon32.gif

將動畫要走的整個劇本使用 @keyframes 撰寫。
當寫完想要的一個劇本之後,在希望動起來的角色裡寫上劇本的名稱 animation-name
還要寫上你希望他可以動多久喔! animation-duration 的單位通常使用s(秒)。

要讓它動起來的角色名稱 {
    animation-name: 動畫劇本名稱;
    animation-duration: 動畫劇本執行時間,例如3s(3秒);
    width: 100px;
    height: 100px;
    background-color: red;
}

@keyframes 動畫劇本名稱 {
    from {background-color: red;}
    to {background-color: yellow;}
}

出現的結果會是:

如果你發現,劇本只寫了要演員從這裡(from)走到那裏(to)太過大略了,你希望你的演員能演得細緻一點,情感戲多一點,/images/emoticon/emoticon02.gif,那麼可以換一個方式來撰寫你的劇本。

@keyframes 動畫劇本名稱 {
    0%   {background-color: red;}
    20%  {background-color: yellow;}
    40%  {background-color: blue;}
    60%  {background-color: pink;}
    80%  {background-color: black;}
    100% {background-color: green;}
}

出現的結果會是:

使用%來寫,可以寫出在一個指定的時間內更多變化及更細緻的動作。

這些都成功了之後,你會發現動畫執行完你所指定的時間就會停止了,如果我希望他能重複撥放,或是能有快有慢的話該怎麼辦呢?

我們下集待續(毆)/images/emoticon/emoticon01.gif


上一篇
DAY 1 - 就來動ㄘ動
下一篇
DAY3 - 使用CCS3動ㄘ動 Part2
系列文
跟著網頁動ㄘ動5
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
King Tzeng
iT邦新手 3 級 ‧ 2017-12-05 11:00:22

搬板凳坐下~(敲碗~/images/emoticon/emoticon31.gif

Ellen K iT邦新手 5 級 ‧ 2017-12-05 11:01:44 檢舉

你也太快速了吧

0
逮丸逮丸
iT邦大師 1 級 ‧ 2017-12-05 15:54:42

很明確很清楚的淺顯易懂的解說。
想問的是:
from, to 裡面除了 background-color 之外,
是也可以像 position 或什麼其他的屬性嗎?

Ellen K iT邦新手 5 級 ‧ 2017-12-05 18:35:45 檢舉

你好:
可以的。
你可以寫其他你希望他變化的屬性,例如寬度width、高度height或是位置等等。

我要留言

立即登入留言