DigiPress

Highly Flexible WordPress Theme

メニュー

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

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

Internet Explorerでは動作しません。

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

元画像

Gare-des-guillemins-01-300x300

CSSで円形加工した表示例

imgタグのCSSクラスに、img-circular と指定するだけで画像を以下のような円形にすることができます。
Gare-des-guillemins-01-300x300

このコード

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

ブルブルシェイク

Gare-des-guillemins-01-300x300
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' />

くるっと回転

Gare-des-guillemins-01-300x300
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' />

ズームイン

Gare-des-guillemins-01-300x300
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' />

ズームアウト

Gare-des-guillemins-01-300x300
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' />

ホバーシャドウ

Gare-des-guillemins-01-300x300
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' />

スウィング

Gare-des-guillemins-01-300x300
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' />

ぐらぐら

Gare-des-guillemins-01-300x300
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' />

ぴくぴく

Gare-des-guillemins-01-300x300
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' />

バウンド

Gare-des-guillemins-01-300x300
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' />

パルス

Gare-des-guillemins-01-300x300
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' />

合わせ技

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

このコード

<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' />