CSS3與濾境(5)-轉場動畫

轉場動畫一般是由場景A轉換到場景B,不過在這裡的轉場動畫卻是”圖片”的轉場動畫,也就是把圖片從A換成B。這些特效主要是IE濾境,個人覺得並不是很實用。此外,要達到轉場動畫的效果,它並不單純只是CSS,還必需結合JavaScript語法才行。由於本篇說明以CSS為主,JavaScript其它的應用就不在介紹範圍。

屬性名稱

Barn(分割)、Blinds(百葉窗)、CheckerBoard(西洋棋盤)、Fade(淡出)、GradientWipe(滾動淡出)、Inset(對角線)、Iris(十字)、Pixelate(馬賽克)、RadialWipe(時鐘)、RandomBars(隨機線條)、RandomDissolve(溶解)、Slide(抽離)、Spiral(矩形螺旋)、Stretch(伸縮變形)、Strips(鋸齒)、Wheel(風車)、ZigZag(擦去)、RevealTrans(綜合)、BlendTrans(緩慢淡出)

Barn

說明:IE濾境,產生從中間向兩側分割開來的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, motion=移動方向(out向外、in向內), orientation=切割方向(vertical垂直、horizontal水平)

【範例】

Barn

BlendTrans

說明:IE濾境,產生類似Fade的淡出效果,但速度較慢。範例結果請參考這裡

屬性值:duration=設定轉場花費時間

【範例】

BlendTrans

Blinds

說明:IE濾境,產生百葉窗的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, bands=產生多少百葉窗格(1~100,預設10), direction=開關方向(down、up、right、left)

【範例】

Blinds

CheckerBoard

說明:IE濾境,產生西洋棋盤的網狀轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, squaresX=產生多少横線(2~無限,預設12), squaresY=產生多少直線(2~無限,預設10), direction=開關方向(down、up、right、left)

【範例】

CheckerBoard

Fade

說明:IE濾境,產生淡出的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, overlap=物件重疊比例(0.0~1.0,預設1.0)

【範例】

Fade

GradientWipe

說明:IE濾境,產生滾動淡出的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, gradientSize=被淡出遮罩覆蓋比率(0.0~1.0,預設0.25), motion=滾動方向(forward向右, reverse向左)

【範例】

GradientWipe

Inset

說明:IE濾境,由對角線產生擴張的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間

【範例】

Inset

Iris

說明:IE濾境,產生由中心切割的十字型轉場效果,可設定不同剪裁形狀。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, irisStyle=剪裁形狀(DIAMOND菱形、CIRCLE圓形、CROSS X形、PLUS十字型、SQUARE方形、STAR星形), motion=移動方向(out向外、in向內)

【範例】

Iris

Pixelate

說明:IE濾境,產生類似馬賽克的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, maxSquare=矩形色塊最大寬度(2~50,預設50)

【範例】

Pixelate

RadialWipe

說明:IE濾境,產生像時鐘的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, wipeStyle=(CLOCK時鐘、WEDGE剝蛋、RADIAL雨刷)

【範例】

RadialWipe

RandomBars

說明:IE濾境,產生隨機線條的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, orientation=線條方向(vertical垂直、horizontal水平)

【範例】

RandomBars

RandomDissolve

說明:IE濾境,產生隨機溶解的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間

【範例】

RandomDissolve

RevealTrans

說明:IE濾境,綜合濾鏡,提供24種轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, transition=特效(0~23,盒狀0收縮1展開、圓形2收縮3展開、向4上5下6左7右擦除、8垂直9水平百頁窗、10横向11縱向棋盤式、12溶解、13左右向中部收縮、14中部向左右展開、15上下向中部收縮、16中部向上下展開、階梯狀向17左下18左上19右下20右上展開、隨機21水平22垂直線、23隨機)

【範例】

RevealTrans

Slide

說明:IE濾境,產生交錯抽離的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, bands=切割成多少條(1~100,預設1), slideStyle=抽離方式(HIDE抽走舊的、PUSH抽舊拉新、SWAP邊抽邊換)

【範例】

Slide

Spiral

說明:IE濾境,用矩形置換並以螺旋的方式移動轉場。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, gridSizeX=横向盤旋次數(1~100,預設16), gridSizeY=縱向盤旋次數(1~100,預設16)

【範例】

Spiral

Stretch

說明:IE濾境,以伸縮變形的方式轉場。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, stretchStyle=變形方式(SPIN中心向左右拉、HIDE由左向右拉、PUSH由左向右拉並推擠舊的)

【範例】

Stretch

Strips

說明:IE濾境,產生鋸齒覆蓋的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, motion=起始角落(leftdown、leftup、rightdown、rightup)

【範例】

Strips

Wheel

說明:IE濾境,產生類似風車轉動的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, spokes=風車葉數目(2~20,預設4)

【範例】

Wheel

ZigZag

說明:IE濾境,產生擦去的轉場效果。範例結果請參考這裡

屬性值:duration=設定轉場花費時間, gridSizeX=横向盤旋次數(1~100,預設16), gridSizeY=縱向盤旋次數(1~100,預設16)

【範例】

ZigZag