CSS3 animation 網頁動畫

講師：陳綺

日期：2018/10/25(星期四)

CSS(Cascading Style Sheets)

大家都知道CSS是讓網頁變漂亮的東西，可以改變字體大小、顏色、字型、背景圖
你的CSS只用來做這些事嗎？它還可以為你做更多！今天我會跟大家介紹這三樣非常棒的CSS用法：

Transition 漸變(轉場)

編號	屬性	說明
1	ease	開始慢速、中間快速、結尾慢速
2	ease-in	開始慢速、結尾快速
3	ease-out	開始快速、結尾慢速
4	linear	全程等速度
5	cubic-bezier	貝茲曲線cubic-bezier(x1,y1,x2,y2)

transition:作用的css屬性 時間 速度;

Transform 變形動作

編號	範例	說明	編號	範例	說明
1	scale	放大縮小(倍數)	2	rotate	旋轉(deg度數)
3	skew	傾斜(deg度數)	4	translate	移動(x,y)
5	旋轉中心	transform-origin:x y z;

transform:效果(數值);

Animation 動畫屬性總覽

編號	屬性	說明
1	animation-name	動畫名稱
2	animation-duration	動畫持續時間，預設 0，單位 s 或 ms。
3	animation-delay	動畫延遲播放時間，預設 0，單位 s 或 ms。
4	animation-iteration-count	動畫播放次數，預設 1。無限次：infinite。
5	animation-timing-function	動畫速度，預設 ease。
6	animation-direction	動畫播放方向，預設 normal。其他還有 reverse、alternate、alternate-reverse。
7	animation-fill-mode	動畫播放前後模式，預設 none。其他還有 forwards、backwards、both。
8	animation-play-state	動畫播放或暫停狀態，預設 running。其他還有 paused。

Animation 動畫（一）

重播

定格

.animation {
    animation:ball 3s infinite alternate;
}
.forwards {
    animation:ball 3s 1;
    animation-fill-mode:forwards;
}
@keyframes ball {   /*套用多個transform時，用空白連接*/
    0%{transform:translateX(250px) rotate(0deg);}
    50%{transform:translateX(250px) rotate(0deg);}
    100%{transform:translateX(700px) rotate(360deg);
        border-radius:50%;background: #f00;}
}

Animation 動畫（二）

DEMO

網路位元組

歡迎加入網路位元組，我們是隸屬於第一校區資管系的網路組(學生組織)，協助提供系上老師及同學相關資訊服務。