1. ホーム
  2. ホームページの作り方
  3. CSS
  4. animate.cssを使ってアニメーションを追加！簡単にできる導入・使用方法
  • 最終更新日
  • CSS

animate.cssを使ってアニメーションを追加！簡単にできる導入・使用方法

ホームページはシンプルなデザインでも見やすければ僕は良いと思います。

でも派手なのが好きな方もいるでしょう（笑）。僕もこのアニメーションを知った時にはめっちゃ使いましたし、今でも使っています。

「animate.css」を導入すれば簡単に滑らかな動きやインパクトのある動きを実装する事ができるので使わない手はないです。

目次 [閉じる]

animate.cssをダウンロードする

Animate.css

Animate.css

こちらが「Animate.css」のサイトです。ページを開いてすぐに動きのデモが確認できるので良いですね。

まぁ、作られているのが海外の方なので英語なのは仕方ないです。僕は全然意味がわかりません（笑）。英語がわかる方ならここで使い方の説明も書いてあるので本家のサイトで確認してもらうのが確実です。

では「animate.css」をダウンロードしていきましょう。ダウンロードはこちらの「GitHub」のページでおこなえます。

ちなみに「GitHub（ギットハブ）」は世界中の方々が自分で作ったプログラムなどを公開しているWebサービスで、これらを無料で使わせてもらえる有り難いサイトです。

animate.cssのダウンロード

①の「Code」をクリックするとボックスが表示されるので、その中にある②の「Download ZIP」からダウンロードしましょう。

ダウンロードができたらZIP形式に圧縮されているので解凍します。次の項ではファイルの設置について見ていきましょう。

animate.cssの導入方法

解凍できたフォルダを見るとファイルがたくさん入っていますが使うのは「animate.min.css」だけでOKです。

それでは「css」フォルダを作って「animate.min.css」を放り込みましょう。

index.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <title>animate.cssを使ってみよう</title>
    6. 
                
  6. <link type="text/css" rel="stylesheet" href="css/animate.min.css">
    7. 
                
  7. <style>
    8. 
                
  8. * {
    9. 
                
  9.   margin: 0;
    10. 
                
  10.   padding: 0;
    11. 
                
  11.   box-sizing: border-box
    12. 
                
  12. }
    13. 
                
  13.  
    14. 
                
  14. html {
    15. 
                
  15.   font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    16. 
                
  16.   font-size: 62.5%;
    17. 
                
  17.   letter-spacing: 0.09em;
    18. 
                
  18.   font-feature-settings: "palt"
    19. 
                
  19. }
    20. 
                
  20.  
    21. 
                
  21. p {
    22. 
                
  22.   font-size: 2rem;
    23. 
                
  23.   font-weight: 600;
    24. 
                
  24.   text-align: center;
    25. 
                
  25.   margin: 100px 0
    26. 
                
  26. }
    27. 
                
  27. </style>
    28. 
                
  28. </head>
    29. 
                
  29. <body>
    30. 
                
  30.   <p class="animate__animated animate__bounce animate__infinite">bounceのアニメーション</p>
    31. 
                
  31. </body>
    32. 
                
  32. </html>
    33.

htmlファイルはそのままコピペでOKです。大事なのは2点だけなのでスゴく簡単です。

            
    
                
  1. <link type="text/css" rel="stylesheet" href="css/animate.min.css">
    2.

ひとつ目はhead内に「animate.min.css」を読み込む事。

            
    
                
  1. <p class="animate__animated animate__bounce animate__infinite">bounceのアニメーション</p>
    2.

ふたつ目はアニメーションを加えたい要素にクラスを追加する事。以上です。

追加するクラスについて少し説明するとアニメーションさせたい要素には「animate__animated」を記述します。さらにアニメーションの種類、今回はバウンスの指定が「animate__bounce」です。

あとは確認しやすいように1回のアニメーションじゃなくて繰り返しリピートの「animate__infinite」を付けてる状態です。

animate.min.cssの配置場所

各ファイルは上記のように設置すればアニメーションが確認して頂けます。

実は「animate.css」は「wow.js」というjQueryと合わせるとかなり使えます。「wow.jsとanimate.cssを使ってスクロール連動型のアニメーションを実装する！」もぜひチェックしてみてください。

こちらも見てください

「animate.css」ではかなり多くのアニメーションが表現できますので、次の項からはそれぞれの動きをご確認ください。わかりやすいようにちょっと遅めにしています。

注目を促すアニメーション

bounce

bounceのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__bounce animate__infinite">bounceのアニメーション</p>
    2.
flash

flashのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__flash animate__infinite">bounceのアニメーション</p>
    2.
pulse

pulseのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__pulse animate__infinite">bounceのアニメーション</p>
    2.
rubberBand

rubberBandのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rubberBand animate__infinite">bounceのアニメーション</p>
    2.
shakeX

shakeXのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__shakeX animate__infinite">bounceのアニメーション</p>
    2.
shakeY

shakeYのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__shakeY animate__infinite">bounceのアニメーション</p>
    2.
headShake

headShakeのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__headShake animate__infinite">bounceのアニメーション</p>
    2.
swing

swingのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__swing animate__infinite">bounceのアニメーション</p>
    2.
tada

tadaのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__tada animate__infinite">bounceのアニメーション</p>
    2.
wobble

wobbleのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__wobble animate__infinite">bounceのアニメーション</p>
    2.
jello

jelloのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__jello animate__infinite">bounceのアニメーション</p>
    2.
heartBeat

heartBeatのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__heartBeat animate__infinite">bounceのアニメーション</p>
    2.

バック系アニメーション

backInDown

backInDownのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__backInDown animate__infinite">bounceのアニメーション</p>
    2.
backInLeft

backInLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__backInLeft animate__infinite">bounceのアニメーション</p>
    2.
backInRight

backInRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__backInRight animate__infinite">bounceのアニメーション</p>
    2.
backInUp

backInUpのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__backInUp animate__infinite">bounceのアニメーション</p>
    2.
backOutDown

backOutDownのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__backOutDown animate__infinite">bounceのアニメーション</p>
    2.
backOutLeft

backOutLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__backOutLeft animate__infinite">bounceのアニメーション</p>
    2.
backOutRight

backOutRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__backOutRight animate__infinite">bounceのアニメーション</p>
    2.
backOutUp

backOutUpのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__backOutUp animate__infinite">bounceのアニメーション</p>
    2.

バウンド系アニメーション

bounceIn

bounceInのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__bounceIn animate__infinite">bounceのアニメーション</p>
    2.
bounceInDown

bounceInDownのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__bounceInDown animate__infinite">bounceのアニメーション</p>
    2.
bounceInLeft

bounceInLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__bounceInLeft animate__infinite">bounceのアニメーション</p>
    2.
bounceInRight

bounceInRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__bounceInRight animate__infinite">bounceのアニメーション</p>
    2.
bounceInUp

bounceInUpのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__bounceInUp animate__infinite">bounceのアニメーション</p>
    2.
bounceOut

bounceOutのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__bounceOut animate__infinite">bounceのアニメーション</p>
    2.
bounceOutDown

bounceOutDownのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__bounceOutDown animate__infinite">bounceのアニメーション</p>
    2.
bounceOutLeft

bounceOutLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__bounceOutLeft animate__infinite">bounceのアニメーション</p>
    2.
bounceOutRight

bounceOutRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__bounceOutRight animate__infinite">bounceのアニメーション</p>
    2.
bounceOutUp

bounceOutUpのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__bounceOutUp animate__infinite">bounceのアニメーション</p>
    2.

フェード系アニメーション

fadeIn

fadeInのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeIn animate__infinite">bounceのアニメーション</p>
    2.
fadeInDown

fadeInDownのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInDown animate__infinite">bounceのアニメーション</p>
    2.
fadeInDownBig

fadeInDownBigのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInDownBig animate__infinite">bounceのアニメーション</p>
    2.
fadeInLeft

fadeInLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInLeft animate__infinite">bounceのアニメーション</p>
    2.
fadeInLeftBig

fadeInLeftBigのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInLeftBig animate__infinite">bounceのアニメーション</p>
    2.
fadeInRight

fadeInRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInRight animate__infinite">bounceのアニメーション</p>
    2.
fadeInRightBig

fadeInRightBigのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInRightBig animate__infinite">bounceのアニメーション</p>
    2.
fadeInUp

fadeInUpのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInUp animate__infinite">bounceのアニメーション</p>
    2.
fadeInUpBig

fadeInUpBigのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInUpBig animate__infinite">bounceのアニメーション</p>
    2.
fadeInTopLeft

fadeInTopLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInTopLeft animate__infinite">bounceのアニメーション</p>
    2.
fadeInTopRight

fadeInTopRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInTopRight animate__infinite">bounceのアニメーション</p>
    2.
fadeInBottomLeft

fadeInBottomLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInBottomLeft animate__infinite">bounceのアニメーション</p>
    2.
fadeInBottomRight

fadeInBottomRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeInBottomRight animate__infinite">bounceのアニメーション</p>
    2.
fadeOut

fadeOutのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeOut animate__infinite">bounceのアニメーション</p>
    2.
fadeOutDown

fadeOutDownのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeOutDown animate__infinite">bounceのアニメーション</p>
    2.
fadeOutLeft

fadeOutLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeOutLeft animate__infinite">bounceのアニメーション</p>
    2.
fadeOutRight

fadeOutRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeOutRight animate__infinite">bounceのアニメーション</p>
    2.
fadeOutUp

fadeOutUpのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeOutUp animate__infinite">bounceのアニメーション</p>
    2.
fadeOutTopLeft

fadeOutTopLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeOutTopLeft animate__infinite">bounceのアニメーション</p>
    2.
fadeOutTopRight

fadeOutTopRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeOutTopRight animate__infinite">bounceのアニメーション</p>
    2.
fadeOutBottomRight

fadeOutBottomRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeOutBottomRight animate__infinite">bounceのアニメーション</p>
    2.
fadeOutBottomLeft

fadeOutBottomLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__fadeOutBottomLeft animate__infinite">bounceのアニメーション</p>
    2.

フリッパー系アニメーション

flip

flipのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__flip animate__infinite">bounceのアニメーション</p>
    2.
flipInX

flipInXのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__flipInX animate__infinite">bounceのアニメーション</p>
    2.
flipInY

flipInYのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__flipInY animate__infinite">bounceのアニメーション</p>
    2.
flipOutX

flipOutXのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__flipOutX animate__infinite">bounceのアニメーション</p>
    2.
flipOutY

flipOutYのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__flipOutY animate__infinite">bounceのアニメーション</p>
    2.

スピード系アニメーション

lightSpeedInRight

lightSpeedInRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__lightSpeedInRight animate__infinite">bounceのアニメーション</p>
    2.
lightSpeedInLeft

lightSpeedInLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__lightSpeedInLeft animate__infinite">bounceのアニメーション</p>
    2.
lightSpeedOutRight

lightSpeedOutRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__lightSpeedOutRight animate__infinite">bounceのアニメーション</p>
    2.
lightSpeedOutLeft

lightSpeedOutLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__lightSpeedOutLeft animate__infinite">bounceのアニメーション</p>
    2.

回転系アニメーション

rotateIn

rotateInのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rotateIn animate__infinite">bounceのアニメーション</p>
    2.
rotateInDownLeft

rotateInDownLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rotateInDownLeft animate__infinite">bounceのアニメーション</p>
    2.
rotateInDownRight

rotateInDownRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rotateInDownRight animate__infinite">bounceのアニメーション</p>
    2.
rotateInUpLeft

rotateInUpLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rotateInUpLeft animate__infinite">bounceのアニメーション</p>
    2.
rotateInUpRight

rotateInUpRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rotateInUpRight animate__infinite">bounceのアニメーション</p>
    2.
rotateOut

rotateOutのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rotateOut animate__infinite">bounceのアニメーション</p>
    2.
rotateOutDownLeft

rotateOutDownLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rotateOutDownLeft animate__infinite">bounceのアニメーション</p>
    2.
rotateOutDownRight

rotateOutDownRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rotateOutDownRight animate__infinite">bounceのアニメーション</p>
    2.
rotateOutUpLeft

rotateOutUpLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rotateOutUpLeft animate__infinite">bounceのアニメーション</p>
    2.
rotateOutUpRight

rotateOutUpRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rotateOutUpRight animate__infinite">bounceのアニメーション</p>
    2.

特別なアニメーション

hinge

hingeのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__hinge animate__infinite">bounceのアニメーション</p>
    2.
jackInTheBox

jackInTheBoxのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__jackInTheBox animate__infinite">bounceのアニメーション</p>
    2.
rollIn

rollInのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rollIn animate__infinite">bounceのアニメーション</p>
    2.
rollOut

rollOutのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__rollOut animate__infinite">bounceのアニメーション</p>
    2.

ズーム系アニメーション

zoomIn

zoomInのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__zoomIn animate__infinite">bounceのアニメーション</p>
    2.
zoomInDown

zoomInDownのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__zoomInDown animate__infinite">bounceのアニメーション</p>
    2.
zoomInLeft

zoomInLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__zoomInLeft animate__infinite">bounceのアニメーション</p>
    2.
zoomInRight

zoomInRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__zoomInRight animate__infinite">bounceのアニメーション</p>
    2.
zoomInUp

zoomInUpのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__zoomInUp animate__infinite">bounceのアニメーション</p>
    2.
zoomOut

zoomOutのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__zoomOut animate__infinite">bounceのアニメーション</p>
    2.
zoomOutDown

zoomOutDownのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__zoomOutDown animate__infinite">bounceのアニメーション</p>
    2.
zoomOutLeft

zoomOutLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__zoomOutLeft animate__infinite">bounceのアニメーション</p>
    2.
zoomOutRight

zoomOutRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__zoomOutRight animate__infinite">bounceのアニメーション</p>
    2.
zoomOutUp

zoomOutUpのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__zoomOutUp animate__infinite">bounceのアニメーション</p>
    2.

スライド系アニメーション

slideInDown

slideInDownのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__slideInDown animate__infinite">bounceのアニメーション</p>
    2.
slideInLeft

slideInLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__slideInLeft animate__infinite">bounceのアニメーション</p>
    2.
slideInRight

slideInRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__slideInRight animate__infinite">bounceのアニメーション</p>
    2.
slideInUp

slideInUpのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__slideInUp animate__infinite">bounceのアニメーション</p>
    2.
slideOutDown

slideOutDownのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__slideOutDown animate__infinite">bounceのアニメーション</p>
    2.
slideOutLeft

slideOutLeftのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__slideOutLeft animate__infinite">bounceのアニメーション</p>
    2.
slideOutRight

slideOutRightのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__slideOutRight animate__infinite">bounceのアニメーション</p>
    2.
slideOutUp

slideOutUpのアニメーション

                        
    
                            
  1. <p class="animate__animated animate__slideOutUp animate__infinite">bounceのアニメーション</p>
    2.
2行目以降の文章をインデント！CSSの「text-indent」プロパティの利用方法 ブラウザ上でデザインを調整する方法と気になるサイトのソースコードの見方

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記