iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 25

網頁動起來-30天學會HTML+CSS,製作精美網站

在設計網頁時通常會加一些動畫特效,吸引使用者的目光及添加與使用者的互動性。
過去製作動畫時以Flash為主,CSS3也可以建立動畫,不再只能用JavaScript或jQuery 才做得到了

transition 漸變

transition-duration漸變效果時間

  • time:可以設定秒(s)或毫秒(ms),如果有多個屬性要分開執行,要用逗號隔開

transition-property漸變效果屬性

transition-property: none|all|property;
  • none:不會產生漸變效果
  • all:所有屬性會有漸變效果
  • property:設定有漸變效果的名稱,有多個屬性用逗號隔開
<h1>test</h1>
h1{
	height:100px;
	background-color:yellow;
	transition-property:color,background,height;
	transition-duration:3s;
}
h1:hover{
	color:red;
	background-color:green;
	height:300px
}

transition-delay漸變時間延遲

transition-delay: time;
  • time:設定延遲時間,單位可以是秒(s)或毫秒(ms),

transition-timing-function漸變速度

transition-timing-function: value;
  • ease:預設值,低速開始,加快,結束減速
  • ease-in:低速開始
  • ease-out:低速結束
  • ease-in-out:低速開始,低速結束
  • linear:均速
  • cubic-bezier(x1,y1,x2,y2):利用貝茲曲線自定義速度模式

以下推薦兩個設定cubic-bezier不錯的網站給大家參考

  • 自訂曲線:建立曲線,創造動畫不同的執行速度
    https://ithelp.ithome.com.tw/upload/images/20211009/2011205303CNcO7hPx.png
  • Easing Functions:這網站列出很多已經建好的函式形式,可以直接套用
    https://ithelp.ithome.com.tw/upload/images/20211009/20112053xTXUM81dEZ.png

transition簡易寫法

順序為:

transition: property duration timing-function delay | initial | inherit
.box{
	width:100px;
	height:100px;
	background:blue;
	transition:width,height 3s;
	-moz-transition:width,height 3s; /* Firefox 4 */
	-webkit-transition:width,height 3s; /* Safari and Chrome */
	-o-transition:width,height 3s; /* Opera */
}
.box:hover{
	width:400px;
	height:300px;
}

animation 動畫

使用時要再加上前綴,讓屬性在每個瀏覽器能夠支援

-moz-     /* firefox瀏覽器 */
-webkit-  /* Safari, google瀏覽器 */
-o-       /* Opera瀏覽器(早期) */
-ms-      /* Internet Explorer  */

animation-name 動畫名稱

animation-name是設定@keyframes動畫名稱

animation-name: keyframe動畫名稱

要與animation-duration屬性搭配,不然動畫不會執行

animation-duration 動畫時間

animation-duration: time;
  • time:完成動畫所需完成時間。可以設定秒(s)或毫秒(ms),如果有多個屬性要分開執行,要用逗號隔開

animation-direction 動畫方向

animation-direction: normal|alternate;
  • normal:預設
  • reverse:反向
  • alternate:正向,再反向(奇數正常播放,偶數反向播放)
  • alternate-reverse:反向,再正向

animation-delay 動畫延遲時間

animation-delay: time;
  • time:可以設定秒(s)或毫秒(ms)

animation-duration 和 animation-delay前者是動畫持續時間,後者為動畫延遲時間

animation-timing-function

動畫的速度曲線

animation-timing-function: value
  • ease:預設值,低速開始,加快,結束減速
  • ease-in:低速開始
  • ease-out:低速結束
  • ease-in-out:低速開始,低速結束
  • linear:均速
  • cubic-bezier(x1,y1,x2,y2):利用貝茲曲線自定義速度模式

animation-iteration-count動畫次數

animation-iteration-count: number |infinite

number:播放次數,預設是1,0的不會執行

inifinite:無限次數執行

animation-play-state 動畫執行或暫停

animation-play-state: paused|running
  • running:預設,動畫是執行狀態
  • paused:動畫暫停

animation-fill-mode動畫延遲與完成

  • none:預設,無樣式
  • forwards:動畫完成後,保持最後關鍵影格樣式
  • backwards:動畫在延遲時,保持最初動畫關鍵影格
  • both:遵照forwards及backwards,動畫在延遲時,保持最初動畫關鍵影格樣式。動畫完成後,保持最後動畫關鍵影格樣式

animation簡易法

順序為:

animation: name duration timing-function delay iteration-count direction;
<div class="box"></div>
.box{
	width:100px;
	height:100px;
	background:orange;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:moveBox 5s infinite; /*Safari and Chrome*/
}

@keyframes movebox{
	from {left:0px;}
	to {left:200px;}
}
 /*Safari and Chrome*/
@-webkit-keyframes movebox{
	from {left:0px;}
	to {left:200px;}
}

@keyframes 關鍵影格

@keyframes animationname {
	keyframes-selector {
		css-styles;
	}
}
  • animationname:影格名稱
  • keyframes-selector:可以使用百分比(0%-100%)、from-to(from與0%相同、to與100%相同)
  • css-styles:CSS屬性

搭配frome-to來做動畫設定

.box{
	position:relative;
	animation:moveBox 5s infinite;
}
@keyframes moveBox{
	from {top:0px;}
	to {top:200px;}
}

搭配百分比來做動畫設定

.box{
	position:relative;
	animation:moveBox 5s infinite;
}
@keyframes moveBox{
	0% {background: red;}
  50% {background: green;}
  100% {background: blue;}
}

CSS動畫特效庫

除了自己寫動畫,網路上也有CSS 的動畫特效庫

Animation.css
https://ithelp.ithome.com.tw/upload/images/20211009/20112053SBpPxrXQHa.png
需要引入css檔案,安裝方式有兩種

方法一:CDN方式

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

方法二:npm或yarn

npm

npm install animate.css --save

yarn

yarn add animate.css

下載完後再import

import "animate.css"

只要在標籤元素添加class名稱animate__animated以及任一動畫名稱如 animate__bounce(記得前綴 animate__!)就會有效果了

<h1 class="animate__animated animate__bounce">An animated element</h1>

Animista

裡面提供數十種的淡入、淡出、旋轉等效果,不需要額外引入JS,只要選好自己的樣式後,點選右上角的 {‧} 按鈕,檢視原始碼,把他複製到你的檔案裡面了
https://ithelp.ithome.com.tw/upload/images/20211009/20112053BsQ3DgYBnW.png
https://ithelp.ithome.com.tw/upload/images/20211009/20112053j2NIUrCI8M.png

結論

介紹了漸變與動畫,你一定會問他們兩者之間有什麼差別,transition是需要被觸發才會執行,像是滑鼠移入(hover)效果,animation則是直接就執行。。


上一篇
網頁編排Grid-30天學會HTML+CSS,製作精美網站
下一篇
網頁變形-30天學會HTML+CSS,製作精美網站
系列文
30天學會HTML+CSS,製作精美網站30

尚未有邦友留言

立即登入留言