Animate.css コードジェネレータ アニメーション
Animate.css はCSS定番の人気アニメーションライブラリです。40種類以上のアニメパターンからクラスを選択するだけで、HTML要素に動きを付与できます。本ツールでプレビューしながらクラス名・継続時間・遅延・繰り返し回数を選択し、コードを即コピーできます。
▶
使い方
- 下部の40種類以上のアニメーションからクリックで選択
- 上部で継続時間・遅延・繰り返し回数を調整
- 「もう一度再生」ボタンでプレビュー確認
- コピーボタンでHTMLコードを取得 (CDN読み込みコード+クラス付与例)
Animate.css の導入方法
生成したコードを使うには、Animate.css ライブラリをCDN等で読み込みます:
<!-- HTMLのheadに追加 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <!-- 要素にクラスを追加 --> <div class="animate__animated animate__bounce">バウンスする要素</div>
Animate.css の特徴
- CSS定番: 2014年から続く、Web業界で広く使われているライブラリ
- JavaScript不要: HTMLにクラスを追加するだけで動作
- 豊富なパターン: 80種類以上のアニメパターンを内蔵
- 無料・MITライセンス: 商用利用も自由
- 軽量: ライブラリサイズ約60KB (minified)