スポンサーリンク

css programming

animate.cssを使用してアニメーションを実装する。

投稿日:

animete.css
簡単にアニメーションを実装したかったので、animate.cssを使用して某サイトを作成しました。
復習がてらに掲載。

animate.min.cssをHTMLに読み込む

こちらからanimate.min.cssをダウンロードし読み込む
単純にheadの記述に下記のCSSを記載すればOK!

<head>
<link rel="stylesheet" href="animate.min.css">
</head>

要素にクラスをつける

あとは要素にクラスをつけていけばOK!

<div id="move" class="animated bounce">bounce</div>
<div id="move" class="animated flash">bounce</div>
<div id="move" class="animated pulse">bounce</div>

実行結果

実行結果は下記のソースを確認してください。
ループ処理は行っていないので止まっていたら右下のreturnボタンをクリック

See the Pen xZOemZ by Atsushi (@office606) on CodePen.

クラスの一覧

クラスの一覧はこちらから確認できるので参照してください。
https://github.com/daneden/animate.css
http://daneden.github.io/animate.css/

JavaScriptでの実行

これはmoveをクリックすればpulseするサンプルです。
"animationend"が実行されればremoveClass()でクラスが外れます。

$(function(){
    $("#move").on({
        "click":function(){
            $(this).addClass("animated pulse");
        },
        "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
            $(this).removeClass("animated pulse");
        }
    });
});

意外と簡単にアニメーションするページを作成することができます。
また上記に記載したJavaScriptを使用することでスクロール位置によって実行されるページの作成も可能です。

2016.1.19追記

infiniteクラスをつけておくとアニメーションがループします。

<div id="test" class="animated flash infinite">flash</div>






Originally posted 2015-12-23 17:01:01.

スポンサーリンク

-css, programming
-,

Copyright© office606 , 2017 All Rights Reserved Powered by STINGER.