軽量でめちゃくちゃ使いやすいアニメーションCSS Animate.css

cap

Animate.cssは、軽量でめちゃくちゃ使いやすいアニメーションCSSです。

シンプルで、動きが綺麗です。実装も簡単です。

オリジナルデモを作ってみました。

実装方法

CSSファイルを読み込みます。必要に応じてjqueryも読み込んでおきましょう。

<head>
 <link rel="stylesheet" href="animate.min.css">
 <script src="js/jquery.min.js"></script>
</head>

対象の要素(#yourElementの部分)と、アニメーション(bounceOutLeftの部分)を指定します。

$('#yourElement').addClass('animated bounceOutLeft');

アニメーションが終了したタイミングで、何かをすることも可能です。

$('#yourElement').addClass('animated bounceOutLeft').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});

アニメーションの細かな速度を指定することもできます。

#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}

公式サイト・解説

Animate.css
公式サイト ダウンロードはこちら。

daneden/animate.css · GitHub
使い方の解説。

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

フリーランスITエンジニアの案件・求人情報サイト

フリーランスWebクリエイター大募集!「ギークスジョブ」

コメント

  • Posted on
  • Updated on
  • Views 750