Animates

Animates 提供的動畫效果主要是以 animation , keyframetransform 來完成。IE 部分至少要 10.0+。可單獨下載 kule-animates.min.css 使用。

要使用 Animates 效果之前,要先加上 .animate,再選擇『效果名稱』。另外,可用以下方式來偵測動畫是否已結束。

$('.selector').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    //Do something...
});

效果範例

Bounces

bounce
Demo
bounceIn
Demo
bounceInLeft
Demo
bounceInUp
Demo
bounceInDown
Demo
bounceInRight
Demo
bounceOut
Demo
bounceOutLeft
Demo
bounceOutUp
Demo
bounceOutDown
Demo
bounceOutRight
Demo
<div class="animate bounce">Bounce</div>

<div class="animate bounceIn">BounceIn</div>
<div class="animate bounceInLeft">BounceInLeft</div>
<div class="animate bounceInUp">BounceInUp</div>
<div class="animate bounceInDown">BounceInDown</div>
<div class="animate bounceInRight">BounceInRight</div>

<div class="animate bounceOut">BounceOut</div>
<div class="animate bounceOutLeft">BounceOutLeft</div>
<div class="animate bounceOutUp">BounceOutUp</div>
<div class="animate bounceOutDown">BounceOutDown</div>
<div class="animate bounceOutRight">BounceOutRight</div>

Fades

fadeIn
Demo
fadeInLeft
Demo
fadeInUp
Demo
fadeInDown
Demo
fadeInRight
Demo
fadeOut
Demo
fadeOutLeft
Demo
fadeOutUp
Demo
fadeOutDown
Demo
fadeOutRight
Demo
<div class="animate fade">fade</div>

<div class="animate fadeIn">fadeIn</div>
<div class="animate fadeInLeft">fadeInLeft</div>
<div class="animate fadeInUp">fadeInUp</div>
<div class="animate fadeInDown">fadeInDown</div>
<div class="animate fadeInRight">fadeInRight</div>

<div class="animate fadeOut">fadeOut</div>
<div class="animate fadeOutLeft">fadeOutLeft</div>
<div class="animate fadeOutUp">fadeOutUp</div>
<div class="animate fadeOutDown">fadeOutDown</div>
<div class="animate fadeOutRight">fadeOutRight</div>

Fadescales

fadescaleIn
Demo
fadescaleInLeft
Demo
fadescaleInUp
Demo
fadescaleInDown
Demo
fadescaleInRight
Demo
fadescaleOut
Demo
fadescaleOutLeft
Demo
fadescaleOutUp
Demo
fadescaleOutDown
Demo
fadescaleOutRight
Demo
<div class="animate fadescaleIn">fadescaleIn</div>
<div class="animate fadescaleInLeft">fadescaleInLeft</div>
<div class="animate fadescaleInUp">fadescaleInUp</div>
<div class="animate fadescaleInDown">fadescaleInDown</div>
<div class="animate fadescaleInRight">fadescaleInRight</div>

<div class="animate fadescaleOut">fadescaleOut</div>
<div class="animate fadescaleOutLeft">fadescaleOutLeft</div>
<div class="animate fadescaleOutUp">fadescaleOutUp</div>
<div class="animate fadescaleOutDown">fadescaleOutDown</div>
<div class="animate fadescaleOutRight">fadescaleOutRight</div>

Rotate

rotateIn
Demo
rotateInLeft
Demo
rotateInUp
Demo
rotateInDown
Demo
rotateInRight
Demo
rotateInDownLeft
Demo
rotateInDownRight
Demo
rotateInUpLeft
Demo
rotateInUpRight
Demo
rotateOut
Demo
rotateOutLeft
Demo
rotateOutUp
Demo
rotateOutDown
Demo
rotateOuRight
Demo
rotateOutDownLeft
Demo
rotateOutDownRight
Demo
rotateOutUpLeft
Demo
rotateOutUpRight
Demo
<div class="animate rotateIn">rotateIn</div>
<div class="animate rotateInLeft">rotateInLeft</div>
<div class="animate rotateInUp">rotateInUp</div>
<div class="animate rotateInDown">rotateInDown</div>
<div class="animate rotateInRight">rotateInRight</div>

<div class="animate rotateInDownLeft">rotateInDownLeft</div>
<div class="animate rotateInDownRight">rotateInDownRight</div>
<div class="animate rotateInUpLeft">rotateInUpLeft</div>
<div class="animate rotateInUpRight">rotateInUpRight</div>

<div class="animate rotateOut">rotateOut</div>
<div class="animate rotateOutLeft">rotateOutLeft</div>
<div class="animate rotateOutUp">rotateOutUp</div>
<div class="animate rotateOutDown">rotateOutDown</div>
<div class="animate rotateOutRight">rotateOutRight</div>

<div class="animate rotateOutDownLeft">rotateOutDownLeft</div>
<div class="animate rotateOutDownRight">rotateOutDownRight</div>
<div class="animate rotateOutUpLeft">rotateOutUpLeft</div>
<div class="animate rotateOutUpRight">rotateOutUpRight</div>

Signs

signInLeft
Demo
signInUp
Demo
signInDown
Demo
signInRight
Demo
signOutLeft
Demo
signOutUp
Demo
signOutDown
Demo
signOutRight
Demo
<div class="animate signInLeft">signInLeft</div>
<div class="animate signInUp">signInUp</div>
<div class="animate signInDown">signInDown</div>
<div class="animate signInRight">signInRight</div>

<div class="animate signOutLeft">signOutLeft</div>
<div class="animate signOutUp">signOutUp</div>
<div class="animate signOutDown">signOutDown</div>
<div class="animate signOutRight">signOutRight</div>

Slides

slideInLeft
Demo
slideInUp
Demo
slideInDown
Demo
slideInRight
Demo
slideOutLeft
Demo
slideOutUp
Demo
slideOutDown
Demo
slideOutRight
Demo
<div class="animate slideIn">slideIn</div>
<div class="animate slideInLeft">slideInLeft</div>
<div class="animate slideInUp">slideInUp</div>
<div class="animate slideInDown">slideInDown</div>
<div class="animate slideInRight">slideInRight</div>

<div class="animate slideOut">slideOut</div>
<div class="animate slideOutLeft">slideOutLeft</div>
<div class="animate slideOutUp">slideOutUp</div>
<div class="animate slideOutDown">slideOutDown</div>
<div class="animate slideOutRight">slideOutRight</div>

Zooms

zoomIn
Demo
zoomInLeft
Demo
zoomInUp
Demo
zoomInDown
Demo
zoomInRight
Demo
zoomOut
Demo
zoomOutLeft
Demo
zoomOutUp
Demo
zoomOutDown
Demo
zoomOutRight
Demo
<div class="animate zoomIn">zoomIn</div>
<div class="animate zoomInLeft">zoomInLeft</div>
<div class="animate zoomInUp">zoomInUp</div>
<div class="animate zoomInDown">zoomInDown</div>
<div class="animate zoomInRight">zoomInRight</div>

<div class="animate zoomOut">zoomOut</div>
<div class="animate zoomOutLeft">zoomOutLeft</div>
<div class="animate zoomOutUp">zoomOutUp</div>
<div class="animate zoomOutDown">zoomOutDown</div>
<div class="animate zoomOutRight">zoomOutRight</div>

Blings

puffIn
Demo
puffOut
Demo
vanishIn
Demo
vanishOut
Demo
<div class="animate puffIn">puffIn</div>
<div class="animate puffOut">puffOut</div>
<div class="animate vanishIn">vanishIn</div>
<div class="animate vanishOut">vanishOut</div>

Flips

flip
Demo
flipInX
Demo
flipInY
Demo
flipOutX
Demo
flipOutY
Demo
<div class="animate flip">flip</div>
<div class="animate flipInX">flipInX</div>
<div class="animate flipInY">flipInY</div>
<div class="animate flipOutX">flipOutX</div>
<div class="animate flipOutY">flipOutY</div>

Pull

pullLeft
Demo
pullUp
Demo
pullDown
Demo
pullRight
Demo
<div class="animate pullLeft">pullLeft</div>
<div class="animate pullUp">pullUp</div>
<div class="animate pullDown">pullDown</div>
<div class="animate pullRight">pullRight</div>

Slits

slitIn
Demo
slitOut
Demo
<div class="animate slipIn">slipIn</div>
<div class="animate slipOut">slipOut</div>

Fall

fallIn
Demo
fallOut
Demo
<div class="animate fallIn">fallIn</div>
<div class="animate fallOut">fallOut</div>

Others

flash
Demo
pulse
Demo
rubberBand
Demo
shake
Demo
swing
Demo
tada
Demo
wobble
Demo
hinge
Demo
hatch
Demo
newspaper
Demo
floating
Demo
tossing
Demo
<div class="animate flash">flash</div>
<div class="animate pulse">pulse</div>
<div class="animate rubberBand">rubberBand</div>
<div class="animate shake">shake</div>
<div class="animate swing">swing</div>
<div class="animate tada">tada</div>
<div class="animate wobble">wobble</div>
<div class="animate hinge">hinge</div>
<div class="animate hatch">hatch</div>
<div class="animate newspaper">newspaper</div>
<div class="animate floating">floating</div>
<div class="animate tossing">tossing</div>

參考來源: