Written by Kasumi

【CSS】簡単にアニメーションを実装! Animate.cssの使い方

CSSで色々変わった動きをつけたい!
簡単にアニメーションを実装したい!。

このような疑問に答えます!

本記事では簡単にCSSのみでアニメーションを実装出来るAnimate.cssについて解説します。

Animate.css公式サイトよりanimate.cssをコピペしてheadに追加しよう

以下リンクよりanimate.cssをダウンロード。
https://daneden.github.io/animate.css/

headにanimate.cssを読み込ませ、動きを付けたい要素のclassに「animated」と上記画像のようにセレクトボックスから希望のアニメーションを選びそのテキスト名を追加するだけです。
たったこれだけ!
簡単に多様なアニメーションを実装できます。

目次

関連記事

HTMLCSS プログラミング

【CSS】input要素のplaceholderの文字だけサイズを変更する方法

2022.01.10
1749
HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

2022.10.03
148
HTMLCSS プログラミング

CSSだけでhover(ホバー)したら画像を拡大させる方法【jQuery不要】

2022.01.03
296
HTMLCSS

CSSのwhite-space nowrapを子要素だけ解除する方法

2022.08.28
292