by
CSS3 Animation
基本動畫
通過@keyframes animationName 包裝動畫。
給對象設定animation-name以及animation-duration即可。
需要注意的是animation-duration默認為0s，也就是說如果沒有設定，就不會有動畫效果。
例子：一個方塊變大的基本動畫
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <style> @keyframes boxAnimation { from{width:30px;height:30px;} to{width:300px;height:300px;} } .box { width: 30px; height: 30px; background-color: orange; animation-name: boxAnimation; animation-duration: 3s; } </style> </head> <body bgcolor="f0f0f0"> <div class="box"></div> </body> </html> |
給動畫分配時間
可以在動畫前設定百分比來分配動畫時間。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> @keyframes boxAnimation { 0% {width:30px;height:30px;} 25% {width:300px;height:300px;} 50% {width:30px; height:30px;} 75% {width:300px; height:300px;} 100% {width:30px; height:30px;} } .box { width: 30px; height: 30px; background-color: orange; animation-name: boxAnimation; animation-duration: 10s; } </style> |
如果想要有中間停頓再繼續動畫的效果，可以在兩個連續時間點上設定一樣的效果，一個例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@keyframes maskAnimation { 0% { -webkit-clip-path: circle(5% at 50% 50%);; } 30%{ -webkit-clip-path: circle(20% at 50% 50%);; } 50%{ -webkit-clip-path: circle(20% at 50% 50%);; } 100% { -webkit-clip-path: circle(100% at 50% 50%); } } |
效果圖：
animation屬性
這是一個簡寫的例子，分別是「動畫名稱xAxis」、「動畫時間2.5秒」、「重複執行infinite」、「動畫樣式比如ease-in」
|
1 2 |
<span class="nl">animation</span><span class="p">:</span> <span class="n">xAxis</span> <span class="m">2.5s</span> <span class="n">infinite</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.02</span><span class="p">,</span> <span class="m">0.01</span><span class="p">,</span> <span class="m">0.21</span><span class="p">,</span> <span class="m">1</span><span class="p">); </span> |
完整簡寫語法：
|
1 |
animation: <i>name</i> <i>duration</i> <i>timing-function</i> <i>delay</i> <i>iteration-count</i> <i>direction</i>; |
css animation屬性
- animation-delay（動畫延遲執行的時間，例3s）
- animation-direction（動畫正執行的方向，可以是逆向，如reverse）
- animation-duration（動畫執行的時間）
- animation-iteration-count（動畫執行次數）
- animation-name（動畫名稱）
- animation-timing-function（動畫類型，如”eash-in”）
動畫實現例子
clip-path進行形狀變化
clip-path可以將原來的內容進行裁減，來幾個方法：
1、clip-path:circle(50% at 50% 50%)
其中circle的參數是（半徑 at 中心點）
以下面為例，以100px,100px為中心，半徑100px畫圓。
我們可以結合@keyframes做動畫
|
1 2 3 4 5 6 7 8 9 10 |
@keyframes maskAnimation { 0% { clip-path: circle(5% at 50% 50%); -webkit-clip-path: circle(5% at 50% 50%);; } 100% { clip-path: circle(100% at 50% 50%); -webkit-clip-path: circle(100% at 50% 50%); } } |
還記得Twitter App打開時的效果嗎？
- 橢圓形ellipse(40% 20% at 50% 50%)，（長軸半徑 短軸半徑 at 中心點）
- 多邊形polygon(第一個點，第二個點，第三個點…..）
路徑動畫
cubic-bezier
可以通過cubic-bezier為animation生成速度曲線替代ease-in的動畫效果（這裡有個cube-bezier的在線工具）
基本語法：cubic-bezier(<x1>, <y1>, <x2>, <y2>)
translateX/Y
設定與初始狀態相對的位置，比如從(0,0)到(200, -450)
|
1 2 |
transform: translateX(200px); transform: translateY(-450px); |
通常這樣的設定，動畫只會呈現直線移動，但如果我們將x軸的動畫與y軸的動畫拆開，並且讓兩個方向動畫的速度不同時，就能跑出曲線的動畫了。
上面的例子來自於一個不錯的文章。
一個例子
需求：一個手機網站，開啟畫面時畫面呈現白色，有一個蜻蜓在畫面上飛行，經過畫面中央時，中央有一個圓圈會展開並且顯示手機網站的畫面，彷彿蜻蜓點水的功能。
CSS Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<style> /*蜻蜓Y軸動畫*/ @keyframes yAxis { 35% { transform: translateY(-450px); } 40% { transform: translateY(-450px); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-900px); } } /*蜻蜓X軸動畫*/ @keyframes xAxis { 35% { transform: translateX(200px); } 40% { transform: translateX(200px); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(600px); } } /* 背景圖動畫 */ @keyframes maskAnimation { 0% { -webkit-clip-path: circle(0px at 50% 50%); } 25% { -webkit-clip-path: circle(0px at 50% 50%); } 30%{ -webkit-clip-path: circle(10% at 50% 50%);; } 100% { -webkit-clip-path: circle(100% at 50% 50%); } } .bg-home { width: 100%; position:relative; animation: maskAnimation 8s; } .df { will-change: transform; /*-webkit-animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);*/ animation: xAxis 6s cubic-bezier(0.02, 0.01, 0.21, 1); position: absolute; width: 200px; height: 200px; bottom: 400px; left: 150px; } .df-container { content: ''; display: block; will-change: transform; width: 200px; height: 200px; /*-webkit-animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);*/ animation: yAxis 6s cubic-bezier(0.3, 0.27, 0.07, 1.64); } </style> |
HTML Code:
|
1 2 3 4 5 6 7 |
<div class="container"> <img class="bg-home" src="bg-home.png"> <div class="df-container"> <img class="df" src="df.png"> </div> </div> |
參考文章