vivify.css animation.css
animation.cssは、androidスマホでchromeでなぜか動作しない＆バージョンアップでclassが大幅に変わったので「vivify.css」に乗り換え。
より実践的なCSSアニメーションがまとまってるが、属性がちょっと複雑。⇒ Effeckt.css
お遊び的なCSSエフェクトがいっぱい。⇒ 150+ Examples
ディズニー:アニメーション１２の原則
//アニメーションできるのは「block要素」か「inline-block要素」。
//[重要]「inline要素」にはアニメーションが付けられません。
// classに、vivifyとアニメーションクラス
// class="infinite で繰り返し
// delay-数字（開始時間） or duration-数字（アニメーション時間）
//数字は100から1000までは50刻み,1000から10750までは250刻み
// example: delay-2500 for 2.5 second delay. or duration-550 for 550 ms duration
nja_.core.jsに登録済
//要素にデータ属性(アニメーション指定)と
data-animate="blink"
//動作用のクラス指定、vivifyクラスは指定不要
//クリック動作
class="click-anime"
//ホバーで動作
class="hover-anime"
//表示のたびにアニメ
class="see-anime"
//最初の１回だけアニメ
class="once-anime"
クリックして動作確認
ball
blink
driveInBottom
driveInLeft
driveInRight
driveInTop
driveOutBottom
driveOutLeft
driveOutRight
driveOutTop
fadeIn
fadeInBottom
fadeInLeft
fadeInRight
fadeInTop
fadeOut
fadeOutBottom
fadeOutLeft
fadeOutRight
fadeOutTop
flip
flipInX
flipInY
flipOutX
flipOutY
fold
hitLeft
hitRight
jumpInLeft
jumpInRight
jumpOutLeft
jumpOutRight
popIn
popInBottom
popInLeft
popInRight
popInTop
popOut
popOutBottom
popOutLeft
popOutRight
popOutTop
pullDown
pullLeft
pullRight
pullUp
pulsate
rollInBottom
rollInLeft
rollInRight
rollInTop
rollOutBottom
rollOutLeft
rollOutRight
rollOutTop
shake
spin
spinIn
spinOut
swoopInBottom
swoopInLeft
swoopInRight
swoopInTop
swoopOutBottom
swoopOutLeft
swoopOutRight
swoopOutTop
unfold
//こんな感じ！！
swoopOutTop
class="see-anime duration-2000" , data-animate="zoomImg"
//こんな感じ！！
ホバーで動作