animate.cssを使うと、テキストにいろいろな動きのCSS3アニメーション効果を簡単につけることができます。

使い方は、animate.cssをダウンロードして、<head>に設置し、あとは動きを付けるテキスト要素にclass名として「animated」とアニメーション効果の名称(70以上用意されています)を列記するだけです。

なお、動きを確認しやすくするため、「animated」のスタイルに「animation-iteration-count: infinite」を追記して、連続動作にしています。

 

サンプル01

animated fadeInDown

サンプル01のhtmlソース

<h3 class="animated fadeInDown gray1">animated fadeInDown</h3>

 

サンプル02

animated rubberBand

サンプル02のhtmlソース

<h3 class="animated rubberBand blue1">animated rubberBand</h3>

 

サンプル03

animated swing

サンプル03のhtmlソース

<h3 class="animated swing dpink">animated swing</h3>

 

サンプル04

animated jello

サンプル04のhtmlソース

<h3 class="animated jello green">animated jello</h3>
※animate.css入手先:https://daneden.github.io/animate.css/

 

戻るボタン