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

Code

<img src='https://digipress.info/themes/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.jpg'  width='300' height='300' class='img-circular' />

ブルブルシェイク
Gare-des-guillemins-01-300x300
imgタグのCSSクラスに animate-shake と指定することで表現できます。

Code

<img src='https://digipress.info/themes/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.jpg' width='300' height='300' class='img-circular animate-shake' />

くるっと回転

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

Code

<img src='https://digipress.info/themes/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.jpg' width='300' height='300' class='img-circular animate-rotate' />

ズームイン

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

Code

<img src='https://digipress.info/themes/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.jpg' width='300' height='300' class='img-circular animate-zoom-in' />

ズームアウト
Gare-des-guillemins-01-300x300
imgタグのCSSクラスに animate-zoom-out と指定することで表現できます。

Code

<img src='https://digipress.info/themes/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.jpg'  width='300' height='300' class='img-circular animate-zoom-out' />

ホバーシャドウ
Gare-des-guillemins-01-300x300
imgタグのCSSクラスに animate-shadow と指定することで表現できます。

Code

<img src='https://digipress.info/themes/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.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/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.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/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.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/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.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/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.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/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.jpg" alt='Gare-des-guillemins-01-300x300' width='300' height='300' class='img-circular animate-pulse' />

合わせ技

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

Code

<img src='https://digipress.info/themes/dp7/wp-content/uploads/sites/2/Gare-des-guillemins-01-300x300.jpg'  width='300' height='300' class='img-circular animate-shadow animate-shake animate-zoom-in' />