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 jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
2632
HTMLCSS

CSSだけで行数を指定。三点リーダーを表示する方法

2023.04.18
729
HTMLCSS

【CSS】flexboxで最後の要素は右寄せ・最初の要素は左寄せにする方法

2022.07.14
6050
HTMLCSS

【簡単】radioボタン(ラジオボタン)のデザインをカスタマイズする方法【CSS】

更新日:2022.11.24
8447