Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
@keyframes:建立一個動畫效果的名稱,然後創造動畫影格。
animation-name:某個動畫效果的名稱。
animation-duration:動畫效果要執行的「期間」。
先瞭解這三樣東西,就可以至少將動畫效果套用至指定元素。
首先,我們必須要先瞭解在製作 CSS 動畫時的幾個基本觀念:
動畫名稱:給定一個名稱,然後就可以套用在任何元素上。
初始狀態:一個動畫的初始狀態,一般是 0%;然而,若沒有指定的話,初始狀態就會是元素本身原來的狀態。
最終狀態:一個動畫的最終狀態,一般是 100%;然而,若沒有指定的話,動畫執行到指定的最後百分比時,就會倒轉回到元素的初始狀態。
執行期間:從初始狀態執行到最終狀態時,要在多少時間完成。
透過以上的基本定義,就可以建立一個基本的 CSS 動畫了。
1、動畫名稱、初始狀態、最終狀態,程式碼的撰寫方式,如下圖:
2、設定一個名稱叫做 rotation 的動畫,初始狀態(0%)時,設定 transform 為 rotate(0deg);最終狀態(100%)時,設定 transform 為 rotate(360deg),如下程式碼:
3、讓某個元素套用由 @keyframes
做好的 rotation
動畫( animation-name
),並且設定執行期間為 5 秒( animation-duration
):
這樣就完成了一個基本的動畫了。另外 0% 及 100% 有各自的保留字,故 0% 可改寫成用 from
來替代;100% 可改寫成用 to
來替代。
試著將 0% 改成 from、將 100% 改成 to。
也試著將 100% 改成 50% 觀察。(會倒轉回去)
動畫效果的播放期間,指的是從 0% ~ 100%,而 animation-fill-mode 是用來設定,當動畫效果未執行的時候(也就是 0% 之前的延遲期間,以及 100% 之後),是否要保留 keyframe 是 0% 或 100% 時的 css。
none
:預設值。
forwards
:動畫播放結束後,仍保留最後 keyframe(即 100%) 的 css。
backwards
:動畫在延遲期間( animation-delay ),要停留在第一個 keyframe(即 0%) 的 css。
both
:同時套用 forwards 及 backwards 的特性。
切換 animation-fill-mode
四種模式觀察看看:
在 div.effect
加上以下 css,再觀察 animation-fill-mode
各種模式:
透過這個網站,拉一個效果,如下結果示意。
指定檔名:cubic_bezier.html
提供 html:
提供部份 css:
提供 js:
結果示意:
參考作法:
指定檔名:button_wiggle.html
@keyframes 說明:
動畫效果名稱為 wiggle
0% 時的位置: left: 0;
10% 時的位置: left: -10px;
20% 時的位置: left: 0;
30% 時的位置: left: 10px;
40% 時的位置: left: 0;
50% 時的位置: left: -10px;
60% 時的位置: left: 0;
70% 時的位置: left: 10px;
100% 時的位置: left: 0;
其它說明:
動畫效果執行一次( animation-duration
)的時間為 1s
漸變函式( animation-timing-function
)設定為 linear
input.input_text 元素的 position 設定為 relative
提供 html:
提供部份 css:
提供 js(放在 </body>
結束標籤之前):
結果示意:
參考作法:
指定檔名:animation_sprite.html
圖片路徑: https://alldata.sgp1.digitaloceanspaces.com/images/sprite_img_new.png
說明:
此圖的寬高分別是 850px
、170px
。
animation-timing-function
使用 steps
函式。
執行方向:做一個寬高都是 170px 的 div,搭配 animation 動畫效果。
提供 html:
結果示意:
參考作法:
背景圖做法:
1、算出每跳一次,要多少百分比 → 25%。
2、steps 要 5 個間隔,就 25% * 5 = 125%。
img 標籤做法:
透過使用 animation-timing-function
,可以控制動畫效果的速度曲線,背後的原理是 cubic-bezier。
timing-function 有七種模式:
ease:這是預設。相當於 cubic-bezier(.25, .1, .25, 1)
linear:相當於 cubic-bezier(0, 0, 1, 1)
ease-in:相當於 cubic-bezier(.42, 0, 1, 1)
ease-out:相當於 cubic-bezier(0, 0, .58, 1)
ease-in-out:相當於 cubic-bezier(.42, 0, .58, 1)
cubic-bezier(n, n, n, n)
steps(int, start | end)
ease
:低速 → 加快 → 減速至結束。這是預設值。
linear
:速度保持一致。
範例:
ease-in
:以低速開始。
ease-out
:以低速結束。
ease-in-out
:以低速開始,也以低速結束。
範例:
像上述的 ease、linear、ease-in、ease-out、ease-in-out 等,都是別名,其實背後都是透過 cubic-bezier()
函式來達成。
這裡有兩個很棒的網站:
自訂曲線:自行建立曲線,來創造動畫不同的執行速度。
Easing Functions:這網站列出很多已經建好的函式形式,可以直接套用。
例如 linear,我們其實也可以用以下來代替(相當於 cubic-bezier(0, 0, 1, 1)
):
所以透過 cubic-bezier() 函式 ,可以自訂任何想要的動畫執行速度。請多加利用上面的兩個網站。
這會以跳躍式的方式來執行,第一個參數(steps)是一個正整數,表示有幾個間隔;而第二個參數(position)可設定 start 或 end(若沒有提供的話,預設是 end
),來看看範例來瞭解其中差異:
想法:如果是 start,就是一開始的位置會在跳第一次的尾端。(方便記憶)
範例:
先觀察一個極端的例子: cubic-bezier(1, 0, 1, 1)
加上 50% 的 keyframes:
結論:每加上一個 keyframe ,例如上例的 50% ,那從 0% 到 50%
就進行一個完整的 animation-timing-function
。從 50% 到 100%
就進行一個完整的 animation-timing-function
。
Grid Items 相關屬性。
數值指的是 Grid Column Line 的意思。
span 2:指的是擴展兩個欄的意思。
例:
數值指的是 Grid Row Line 的意思。
span 2:指的是擴展兩個欄的意思。
例:
原來九個欄位如下:
將 4 的那個欄位,擴展到 4、5、7、8,變成如下:
例 1:使用 Grid Line 來設定範圍:
例 2:使用 grid-area 來將欄位指定位置(例:將 1 和 9 對調):
例 3: grid-area
也可以用來設定這個 Item 的名稱,然後就可以在 Grid Container
中使用 grid-template-areas
中直接指定名稱。
範例請參考 grid-template-areas
屬性。
請參考 justify-items
。
請參考 align-items
。
請參考 place-items
。
是 justify-self
和 align-self
的簡寫形式,格式如下:
建立 grid_practice.html
來練習,請貼上以下原始碼:
使用 Grid 排版模式,變成如下圖佈局:
例如 header.grid_item
:
參考作法:
給定各個 Item 命名如下:
參考作法:
接案自由工作者 Freelancer
成立 webmix 設計好網站粉絲專頁
成立 卡斯有限公司,承接主機代管、前端開發、網站架設等服務。
於 Tibame 教學網站設計開發相關領域課程。
2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
2013 年:全職的網站前端自由工作者。
2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
2017 年:承接標案
2018 年 ~ 至今:網站相關教學
2019 年:維護存股管家 Chatbot
張互賓/Carlos
Email:chang.abin@gmail.com
希望 讀者/學員 在這學習領域中,有遇到疑問,可直接與我聯繫,盼能協助各位在這領域上精進。
預設值是 auto
,可設定欄數:
例:
balance
:預設值,各欄的內容會儘可能平均。
auto
:內容會到達高度之後,才會到下一欄。
例:
預設值是 normal
。
例:
跟 border
的屬性值寫法相同。
例:
none
:預設值。
all
:設定跨欄呈現。
例:
設定了 column-width
,就不建議設定 column-count
。
例:
建立 waterfall.html
檔案,輸入以下:
然後以 div.column_item
為單位,多複製一些,改變內容數字1
以及圖片寬高 300x100
。
例:
指定某一個或多個 css 屬性,套用轉場效果,例如寬度( width )在 A 狀態是 100px,而 B 狀態是 200px,那轉場就會是寬度從 100px 漸進增加至 200px。
all
:這是預設,會試圖將所有可以轉場效果的 css 屬性,都直接套用。
none
:任何 css 屬性都不會套用轉場效果。
property
:這裡是指特定 css 屬性套用轉場效果,例如 width、transform、opacity 等,只要是可以形成數值變化的都可以。
以 3.1 的例子來看,有設定 transition 轉場效果的,有 width
、height
、border-radius
。
觀察,將:
改成:
display
屬性設定:
grid
:區塊類型的 Grid Layout。
inline-grid
:行內區塊類型的 Grid Layout。
例:
以九宮格為例:
觀察開發者工具:
有設定 display 為 grid
或 inline-grid
的元素,就叫做 Grid container
。
在 Grid Container
裡面的第一層子元素,統稱叫做 Grid Items
。
Grid Row Track:
Grid Column Track:
留意每條 Grid Line 都有自己的編號,如下所示;也可以反向的來數,反向的話,就是從 -1
開始數。
Row Axis:也稱做 Inline Axis。
Column Axis:也稱做 Block Axis。
例:
例:
設定 3 欄,每欄寬度自動分佈:
設定 2 欄,第一欄寬度是 100px,第二欄寬度是 150px:
例:
設定第一列的高度為 100px,第二列的高度為 150px:(註:大部份情況,高度應由內容來撐)
例:
需先瞭解 grid-column
及 grid-row
,才能瞭解 dense
部份。
row
:預設值,設定 Items 沿著 row 的方向依序出現。
column
:設定 Items 沿著 column 的方向依序出現。
row dense
:加上 dense 會讓 Items 遞補。
column dense
:加上 dense 會讓 Items 遞補。
例:
各列高度由 grid-template-rows
來設定,
其它列沒有指定到高度的,如下範例,第一個列設定 200px,下一個列設定 300px,再下一列會是 200px,以此類推:
例:
各欄寬度由 grid-template-columns
來設定,
其它欄沒有指定到寬度的,如下範圍,第一個欄設定 120px,下一個欄設定 180px,再下一欄會是 120px,以此類推:
例:
需先瞭解 grid-area
,才能瞭解 grid-template-areas
部份。
用途:
在 Grid Items 使用 grid-area
來設定各個 Item 的名稱。
然後就可以在 Grid Container 中使用 grid-template-areas
來做排版。
grid-template-areas
的語法:
以雙引號(單引號也可)當做是一個列,然後如果要表達下一個列,那就再使用雙引號,各列的雙引號以空格做區隔。
有一個符號是 .
,代表的意思是沒有名稱的 Grid Item。
例 1:
例1:
例2:
例:
第一個參數:表示「第二個參數的內容」,要重覆幾次。例:
第一欄的寬度是 100px ~ 200px,例:
fr
是 fraction of the free space,也就是剩餘空間,以比例方式來分配,例:
grid-column-gap
在 CSS3 中,已更名為 column-gap
。
grid-row-gap
在 CSS3 中,已更名為 row-gap
。
grid-gap
在 CSS3 中,已更名為 gap
。
例:
設定 Items 沿著 Row(Inline) Axis
來排列。
可設定的屬性值有:
stretch
:預設,寬度填滿整個 Cell。
start
:設定 Item 在自己 Cell 的左邊。
end
:設定 Item 在自己 Cell 的右邊。
center
:設定 Item 在自己 Cell 的中間。
例:
justify-self
是在 Grid Items 上設定,只作用於 Item 自己。
設定 Items 沿著 Column(Block) Axis
來排列。
可設定的屬性值有:
stretch
:預設,高度填滿整個 Cell。
start
:設定 Item 在自己 Cell 的上方。
end
:設定 Item 在自己 Cell 的下方。
center
:設定 Item 在自己 Cell 的中間。
例:
align-self
是在 Grid Items 上設定,只作用於 Item 自己。
是 justify-items
和 align-items
的簡寫形式,格式如下:
place-self
是在 Grid Items 上設定,只作用於 Item 自己。
全部的 Items,一起沿著水平方向 Row(Inline) Axis
的排列,可以設定的屬性值有 7 個,如下:
stretch
:預設值。
start
:置左。
end
:置右。
center
:置中。
space-around
:Grid Items 之間的距離會是最左邊、最右邊的兩倍大。
space-between
:Grid Items 最左邊會靠左、最右邊會靠右,其餘距離均分。
space-evenly
:Grid Items 之間的距離及最左邊、最右邊,距離都是相同的。
例:
全部的 Items,一起沿著垂直方向 Column(Block) Axis
的排列,可以設定的屬性值有 7 個(與 justify-content
屬性相同),如下:
stretch
:預設值。
start
:置頂。
end
:置底。
center
:置中。
space-around
:Grid Items 之間的距離會是最上方、最下方的兩倍大。
space-between
:Grid Items 最上方會置頂、最下方會置底,其餘距離均分。
space-evenly
:Grid Items 之間的距離及最上方、最下方,距離都是相同的。
例:
是 justify-content
和 align-content
的簡寫形式,格式如下:
官網:https://michalsnik.github.io/aos/
說明文件:https://github.com/michalsnik/aos
在螢幕畫面中上下滑動頁面時,滑到指定位置,觸發動畫效果。
官方提供的初始化:
data-aos:套用哪個動畫效果,官方提供。
在想要套用的元素上,加上 data-aos 屬性及動畫效果,例:
最後再執行以下 JS 程式:
data-aos-easing:官方提供。ease 是預設。
data-aos-duration:0 ~ 3000 毫秒。400 是預設。
data-aos-delay:0 ~ 3000 毫秒。0 是預設。
data-aos-once:是否僅執行一次( true 或 false )。false 是預設。
藉由以下範例,自行測試上述四個屬性:
data-aos-offset:預設是 120,單位是px。當螢幕的下方經過該元素之後,這 120 指的是該元素的上方、螢幕的底部,距離是 120px 時,會觸發動畫效果。
以下範例請將 data-aos-offset
由 120 改為 0,觀察看看,也就是該元素的上方、螢幕的底部碰到的時候,就觸發動畫效果。
data-aos-anchor-placement
:預設值是 top-bottom
,第一個 top 指的是該元素的上方,第二個 bottom 指的是螢幕的下方。分別可以各自改成 top
、center
、bottom
的組合(例 center-center
),以達成該元素的哪個位置碰觸到螢幕的哪個位置時,觸發動畫效果。
以下例子 data-aos-offset
設定成 0,data-aos-anchor-placement
沿用預設值 top-bottom
,以便觀察:
改成 top-center
(該元素的上方、螢幕的中間),然後自己做一個動畫效果的「觸發提示線」,以便觀察:
data-aos-anchor
:將該元素的觸發位置,改由另一個元素去決定觸發時機。
以下例子碰到黃色區域的時候,紅色元素的動畫效果就會觸發:
撰寫如下 css( 屬性 data-aos 等於 rotate-animation ,創造一個旋轉 360 度的動畫效果),接下來直接在標籤加上 data-aos 屬性,然後再加上 rotate-animation
的值,就可以創造自訂的動畫效果了:
觀察:在動畫效果觸發的時候,會自動加上 aos-animate
樣式。
撰寫如下 css( 屬性 data-aos 等於 my-blink-animation ,創造閃爍效果),接下來直接在 data-aos 屬性上,加上 my-blink-animation
的值,就可以創造自訂的 keyframes 動畫效果了:
指定檔名:css_animation.html
提供以下初始狀態的原始碼,再按照以下指示完成此作業(只需要撰寫 @keyframes
與 animation
相關 CSS 即可):
@keyframes 說明:
需要撰寫兩個 @keyframes 動畫效果。第一個名稱為 move_to_right
,第二個名稱為 fade_out
。
move_to_right 動畫效果(keyframes)說明 1:初始狀態( 0%
)旋轉 0 度( transform
),距離左側 100px( left
)。
move_to_right 動畫效果(keyframes)說明 2:在 30%
狀態的時候,旋轉到 360 度,距離左側 30% ( left
);此時 animation-timing-function
的部份,改成 cubic-bezier(1,.06,.78,.81)
。
move_to_right 動畫效果(keyframes)說明 3:在 70%
狀態的時候,旋轉到 720 度,距離左側 calc(100% - 100px)
;此時 animation-timing-function
的部份,改成 ease-out
。
move_to_right 動畫效果(keyframes)說明 4:在 100%
狀態的時候,旋轉回到 360 度,距離左側 calc(100% - 100px - 300px)
。
以上完成了 move_to_right 動畫效果。
fade_out 動畫效果(keyframes)說明 1:在 0%
狀態的時候,不透明度( opacity
)設定為 1
。
fade_out 動畫效果(keyframes)說明 2:在 100%
狀態的時候,不透明度( opacity
)設定為 .1
。
套用動畫效果的說明:
針對 div.ball
套用以上所撰寫的兩個動畫效果,先套用 move_to_right
,再套用 fade_out
。( animation-name
)
兩個動畫效果的執行期間,分別是 10s
與 1s
。( animation-duration
)
一開始的 animation-timing-function
,分別是 ease-out
與 linear
。( animation-timing-function
)
填滿模式的部份,針對 move_to_right 設定動畫效果一開始要直接在 0%
的位置( backwards
),動畫效果執行完後,要停留在最後 100%
的位置( forwards
),兩者都套用可以直接使用 both
;而 fade_out 的動畫效果,不需要特別設定( none
)。( animation-fill-mode
)
延遲的部份,針對 move_to_right,延遲 1s
;針對 fade_out,延遲 22s
。( animation-delay
)
動畫效果執行次數,move_to_right 與 fade_out 都是各執行 2 次。
動畫效果執行方向,move_to_right 與 fade_out 都是設定正向與反向交替執行( alternate
)。( animation-direction
)
其它說明:
點擊 div.ball
的時候,動畫效果暫停,如果再點擊,就恢復動畫效果。寫在 css 裡的 div.ball.-pause
這個選擇子。( animation-play-state
)
結果示意:
https://alldata.sgp1.digitaloceanspaces.com/sample/css_animation_homework.zip
(TFD104 優先使用):Tibame 平台
繳交期限 10/12(二)
指定檔案: animation_loading_icon.html
說明:
一個 div,寬高都是 50px。
上邊框比較深的紅色 hsla(0, 100%, 50%, 1)
,其它邊框比較淺的紅色 hsla(0, 50%, 80%, .5)
。
圓角 50%。
寫一個 css animation 動畫效果,如下「結果示意」。
提供 html:
結果示意:
參考作法:
指定檔名:fixed_right_sidebar.html
說明:
做一個固定於螢幕右側的介面,點擊按鈕後可以像抽屜那樣的展開、關閉。
展開、關閉,需加上 transition
做過場效果。
提供 JS,在 </body>
結束標籤之前放入以下原始碼:
結果示意:
參考作法:
指定檔名:content_fadein_fadeout.html
說明:
各自的按鈕,以淡入淡出切換內容的出現。
只需要修改 css 的部份即可。
提供 html:
提供 CSS:
提供 JS,在 </body>
之前,放入以下原始碼:
結果示意:
參考作法:
指定檔名:submenu_fadein_fadeout.html
結果示意:
提供 html:
參考這個 codepen,沒有淡入淡出的方式:
改成淡入淡出。
參考作法:
指定檔名:color_border_rotate.html
說明:
做一個區塊彩色邊框的旋轉。
提供 html:
提供部份 CSS:
預設的樣式:
完成結果示意:
參考作法:
指定檔名:water_effect.html
提供 html:
提供以下部份 css:
預設的樣式:
完成結果示意:
參考作法:
官網:
註:。
1、
2、
3、
4、
5、
6、
7、
指定檔名:search_transition.html
說明:
搜尋框 100px
放大鏡 icon 定位在搜尋框的恰當位置(如圖)。
點擊 focus 狀態的時候,寬度變成 100%,需設定 transition
結果示意:
提供 html:
搜尋 icon 的圖片路徑:
https://alldata.sgp1.digitaloceanspaces.com/images/searchicon.png
參考作法:
指定檔名:text_cover.html
說明:
整個區塊是一個連結,點擊開新分頁。(連到任意網址皆可)
圓角 5px。
「美麗的風景」文字顏色 #FFF
,背景色 hsla(0, 0%, 0%, .5)
,文字大小 .8rem
。定位在距離上方 10px、距離左側 0px。
「次要說明」文字,樣式同上,但預設看不到,定位在距離左側 0px、距離下方 0px。
滑鼠移過連結區塊,「次要說明」文字,往上滑出(transition):transform .5s
。
結果示意:
提供 html:
參考作法:
指定檔名:fixed_top_nav.html
結果示意:
提供最上方置頂的那塊 html:
載入 jQuery :(放在 </body>
結束標籤之前)
以下程式放在 </body>
結束標籤之前,在上述 jQuery 載入之後:
參考作法:
依照下圖,可以直接下載官方所提供的 CSS:
在想要套用效果的元素上,加上這 animate__animated
個 class。
然後再加上想套用哪種效果的 class,例如 swing
,就再加上 animate__swing
是不是會有效:
試著套上 heartBeat、fadeIn 動畫效果。
只要加上 animate__infinite
這個 class 即可。
例如:
animation-duration:在外掛的官方定義中,預設是 1 秒。
animation-delay:在外掛的官方定義中,預設是 0 秒。
animation-iteration-count:在外掛的官方定義中,預設是 1 次。
有的時候動畫效果樣式,是在使用者做了某種行為之後,才觸發動畫效果。
例如以下範例:使用者點擊按鈕,觸發動畫效果的執行:
動畫效果只會觸發 1 次?
jQuery CDN:
利用官方提供的函式:(不需要瞭解這個函式裡的程式細節,只需要知道怎麼用這個函式即可)
函式說明:
在 .the_block
這個元素上,加上 animate__bounce
這個 class(同時也會加上 animate__animated
這個 class)。
效果執行完後,會自動移除 animate__animated
和 animate__bounce
這兩個 class。
只要在 animateCSS()
後面,再加上相關的程式即可:
官網: