[CSS] CSS動畫基礎 CSS Animation Basics

05-01

不需贅述恰到好處的動效所能帶來的好處啦，這篇就是簡單粗暴地說怎麼使用css實現一些簡單的動畫效果。

要是用css得到簡單的動畫效果，最基礎的就是

Keyframes ：就像用after effect做動畫一樣～設置不同的keyframe就好啦

Animation Properties ：定義元素在它所在的keyframe里具體怎麼運動

然後就可以開始製作簡單的動效了＝v＝對！就是這麼簡單粗暴……

1.建個index.html先

<html> <head> <title> A Simple Animation </title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="opening"> <div id="b1" class="balls"></div> <div id="b2" class="balls"></div> </div> </body></html>

2. 建個style.css，我們來畫倆圓圈

/*設置一個漂亮的背景顏色*/html { background: radial-gradient(circle at -5% 107%, #88d1fa, #2a97de 47%, #115fbd) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}/*不論屏幕大小，讓你的動畫一直居中*/.opening { margin-top: 150px; margin-left:50%; width: 200px; height: 380px; position: relative;}/*畫一個20px直徑的圓圈*/.balls{ background: #fff; width: 20px; height: 20px; border: 0px solid #fff; border-radius: 50%; position: absolute; top:0; bottom:0;}

3. 現在我們圓圈也畫好了，那就讓它動起來就好了～就跟用after effect一樣

在剛剛的style.css後面繼續接上：

/*告訴倆圓圈怎麼動：「圓圈1和2，你們分別按照一個名字叫做ballmove的動畫動6秒吧，1先動，2等一秒再動，然後無限循環」*/#b1 { animation: ballmove 6s infinite;}#b2 { animation: ballmove 6s infinite; animation-delay: -1s}

終於到最重要的一步了～讓倆圓圈動起來～

4. 通過keyframe和Animation Properties讓圓圈運動起來

@keyframes b { /*從0秒到6*25%=1.5秒，以原來的位置為原點，橫向向右移動42個px，大小變為原來的0.5*/ 25% {transform: translateX(42px) scale(0.5);} /*從6*25%=1.5s秒到6*50%=3秒，保持橫向位置不變，大小不變，縱向向下移動42px*/ 50% {transform: translateX(42px) translateY(42px);} 50.1% {transform: translateX(42px) translateY(42px);} 75% {transform: translateX(0px) translateY(42px) scale(0.5);} 100% {transform: translateX(0px) translateY(0px) scale(1);}}

就是這麼簡單，然後就可以一點兒一點兒地寫好在哪個時間點上，什麼東西應該在哪裡～這樣慢慢就做好一個動畫啦～動起來的話，可以看這個codepen：example

當然了……這是最簡單粗暴的辦法了～手動一點點兒地寫

在上面那個例子裡面，animation properties我們只用到了 animation name（ballmove）， animation duration（6s）， animation-iteration-count（infinite）～

其實還有很多properties可以用來定義動畫，當使用很多properties，應該遵循下面的這個順序來一個一個列明：

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

Animation-name

也有很多已經定義好了的動效，比如說bounceIn之類的，可以拿來直接使用～這裡https://daneden.github.io/animate.css/ 有很多已經定義好的動畫效果，可以直接用，非常方便～

Animation-timing-function:

通過給它一個值，可以定義動畫怎麼來動得更自然一些～常用的有：

ease-in,

ease-out,

ease-in-out,

initial /*initial 指按照default來*/

inherit /*inherit 指跟它的parent元素一樣*/

更複雜一些的話，可以使用各種巴塞爾曲線，這裡有例子：<single-transition-timing-function>

Animation-iteration-count

定義這個動畫播放幾遍～

infinite /*無限循環*/

initial /*按照default來*/

inherit /*播放次數跟它的parent元素一樣*/

Animation-direction

normal (default) /*從0%到100%正常順序播放*/

reverse /*從100%到0%倒著播放*/

alternate /*一正一反交替播放，奇數次正著從0%到100%，偶數次倒著從100%到0%*/

alternate-reverse /*一反一正交替播放，奇數次倒著從100%到0%，偶數次正著從0%到100%*/

Animation-play-state

定義動畫是播放還是暫停

playing /*播放*/

paused /*暫停*/

例子：可以達到滑鼠hover on動畫就暫停的效果

.div:hover { animation-play-state: paused;}

Reference:

CSS Animation for Beginners

Tobias Ahlin

Can I use... Support tables for HTML5, CSS3, etc

https://daneden.github.io/animate.css/