アニメーション用セレクタ

画像やテキスト、その他HTMLタグで括ったコンテンツにCSSを利用したアニメーション効果を付けることができます。

アニメーション用CSSの前に、CSSで画像を事前に加工してみます。

<img src='https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg'  width='300' height='300' class='img-circular' />

ブルブルシェイク

imgタグのCSSクラスに animate-shake と指定することで表現できます。

このコード

<img src='https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg' width='300' height='300' class='img-circular animate-shake' />

くるっと回転

imgタグのCSSクラスに animate-rotate と指定することで表現できます。

このコード

<img src='https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg' width='300' height='300' class='img-circular animate-rotate' />

ズームイン

imgタグのCSSクラスに animate-zoom-in と指定することで表現できます。

このコード

<img src='https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg' width='300' height='300' class='img-circular animate-zoom-in' />

ズームアウト

imgタグのCSSクラスに animate-zoom-out と指定することで表現できます。

このコード

<img src='https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg'  width='300' height='300' class='img-circular animate-zoom-out' />

ホバーシャドウ

imgタグのCSSクラスに animate-shadow と指定することで表現できます。

このコード

<img src='https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg'  width='300' height='300' class='img-circular animate-shadow' />

スウィング

imgタグのCSSクラスに animate-swing と指定することで表現できます。

<img src="https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg" alt='Gare-des-guillemins-01-300x300' width='300' height='300' class='img-circular animate-swing' />

ぐらぐら

imgタグのCSSクラスに animate-wobble と指定することで表現できます。

<img src="https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg" alt='Gare-des-guillemins-01-300x300' width='300' height='300' class='img-circular animate-wobble' />

ぴくぴく

imgタグのCSSクラスに animate-wiggle と指定することで表現できます。

<img src="https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg" alt='Gare-des-guillemins-01-300x300' width='300' height='300' class='img-circular animate-wiggle' />

バウンド

imgタグのCSSクラスに animate-bounce と指定することで表現できます。

<img src="https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg" alt='Gare-des-guillemins-01-300x300' width='300' height='300' class='img-circular animate-bounce' />

パルス

imgタグのCSSクラスに animate-pulse と指定することで表現できます。

<img src="https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg" alt='Gare-des-guillemins-01-300x300' width='300' height='300' class='img-circular animate-pulse' />

合わせ技

これまでのアニメーション用クラスを複数指定したサンプルです。

このコード

<img src='https://demo.dptheme.net/dp18/wp-content/uploads/sites/36/2018/03/652851.jpg'  width='300' height='300' class='img-circular animate-shadow animate-shake animate-zoom-in' />