勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQuery無しで要素にアニメーション効果を設定する方法(animate.css)

  CSS

あるサイトをWappalyzerで調査していた際に「animate.css」という聞いたことの無いCSSのライブラリが使用されていた。何なのかと調べたところ名前の通りCSSでアニメーションに関する設定を簡単に行えるライブラリの模様。以下に利用方法とサンプルをメモ。

 

animate.css

公式サイト

https://animate.style/

CDN

CDNで使う場合は以下を記述する。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

異なるバージョンを使用したい場合は以下から探す。

https://cdnjs.com/libraries/animate.css

 

サンプル

https://taitan916.info/sample/animate.css/

 

利用方法

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CSSライブラリ「animate.css」のサンプル</title>
<style>
.animate_div{
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
}
</style>
</head>
<body>

    <div>
        <div>1回のみ動作</div>
        <div class="animate_div animate__animated animate__bounce">animate__bounce</div>
        <div class="animate_div animate__animated animate__flash">animate__flash</div>
        <div class="animate_div animate__animated animate__shakeY">animate__shakeY</div>
        <div class="animate_div animate__animated animate__shakeX">animate__shakeX</div>
    </div>

    <div>
        <div>3回動作</div>
        <div class="animate_div animate__animated animate__bounce animate__repeat-3">animate__bounce</div>
        <div class="animate_div animate__animated animate__flash animate__repeat-3">animate__flash</div>
        <div class="animate_div animate__animated animate__shakeY animate__repeat-3">animate__shakeY</div>
        <div class="animate_div animate__animated animate__shakeX animate__repeat-3">animate__shakeX</div>
    </div>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</body>
</html>

解説等

アニメーションを指定したい要素に「.animate_div」を指定する。

次に指定したいアニメーションを公式サイトから探し、当該Class(.animate__bounce等)を追加する。

最後に必要に応じて繰り返し要素を以下の通り指定する。繰り返さない場合は指定不要。

  • 2回繰り返し → .animate__repeat-2
  • 3回繰り返し → .animate__repeat-3
  • 無限に繰り返し → .animate__infinite

 

参考サイト

https://web.skipjack.tokyo/css/css_use_animate-css/

 - CSS

  関連記事

HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)

HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...