CSS3 動畫基礎和路徑動畫

CSS3 Animation

基本動畫

通過@keyframes animationName 包裝動畫。

給對象設定animation-name以及animation-duration即可。

需要注意的是animation-duration默認為0s,也就是說如果沒有設定,就不會有動畫效果。

例子:一個方塊變大的基本動畫

box-animation1

Code:

給動畫分配時間

可以在動畫前設定百分比來分配動畫時間。

如果想要有中間停頓再繼續動畫的效果,可以在兩個連續時間點上設定一樣的效果,一個例子:

效果圖:

pause-resume

animation屬性

這是一個簡寫的例子,分別是「動畫名稱xAxis」、「動畫時間2.5秒」、「重複執行infinite」、「動畫樣式比如ease-in」

完整簡寫語法:


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畫圓。

clip-path-circle

我們可以結合@keyframes做動畫

rec-circle

還記得Twitter App打開時的效果嗎?

rec-circle2

  • 橢圓形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)

通常這樣的設定,動畫只會呈現直線移動,但如果我們將x軸的動畫與y軸的動畫拆開,並且讓兩個方向動畫的速度不同時,就能跑出曲線的動畫了。

css-animation

上面的例子來自於一個不錯的文章


一個例子

需求:一個手機網站,開啟畫面時畫面呈現白色,有一個蜻蜓在畫面上飛行,經過畫面中央時,中央有一個圓圈會展開並且顯示手機網站的畫面,彷彿蜻蜓點水的功能。

df-fly

CSS Code:

HTML Code:

 


參考文章

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *