[CSS] Animate.cssのアクション一覧とAnimate.cssをbeforeやafterから利用する方法

Animate.cssが読み込まれている前提で、before疑似要素やafter疑似要素からAnimate.cssのアニメーションを呼び出す方法です。

animation: bounce 3s ease infinite;

の記述のうち「bounce」部分をAnimate.cssの指定に合わせて書き換えることで動作します(指定できる値は以下参照)。

もっとスマートな方法があるのかもしれません。

Animate.cssのアクション一覧表

Attention Seekers

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello

Bouncing Entrances

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp

Bouncing Exits

bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp

Fading Entrances

fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig

Fading Exits

fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig

Flippers

flip
flipInX
flipInY
flipOutX
flipOutY

Lightspeed

lightSpeedIn
lightSpeedOut

Rotating Entrances

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight

Rotating Exits

rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

Sliding Entrances

slideInUp
slideInDown
slideInLeft
slideInRight

Sliding Exits

slideOutUp
slideOutDown
slideOutLeft
slideOutRight

Zoom Entrances

zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp

Zoom Exits

zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

Specials

hinge
jackInTheBox
rollIn
rollOut

HTML

CSS

Run Result

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください