Animate.css純CSSアニメーションライブラリ
githubのアドレスは次のとおりです.https://daneden.github.io/animate.css/
Animate.css
cssファイルをラベルにインポート
アニメーションを実行したい要素のclassにanimatedを追加します.infiniteというスタイルを追加してアニメーションを無限にループすることもできます. 最後に要素に次のclassを追加すると、異なるアニメーション効果が得られます. bounce flash pulse rubberBand shake headShake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp
例:
すべてのアニメーション効果を表示
Animate.css
Just-add-water CSS animation
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
基本的な使い方
<head>
<link rel="stylesheet" href="animate.min.css">
</head>例:
<h1 class="animated infinite bounce">Example</h1>すべてのアニメーション効果を表示