W3.CSS アニメーション

❮ 前章へ 次章へ ❯

W3.CSS アニメーションにより、HTML 要素のスライドやフェードインが可能になります。







Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!
Animation is Fun!

要素のスライドイン

w3-animate-* クラスにより、上下左右から要素をスライドインします：

クラス 定義
w3-animate-top 画面の上 0px から 300px まで、要素をアニメーションします Try it
w3-animate-bottom 画面の下 0px から 300px まで、要素をアニメーションします Try it
w3-animate-left 画面の左 0px から 300px まで、要素をアニメーションします Try it
w3-animate-right 画面の右 0px から 300px まで、要素をアニメーションします Try it

要素のフェードイン

w3-animate-opacity クラスにより、要素をフェードインします：

例

<div class="w3-animate-opacity">..</div>
Try It Yourself ❯

要素のズームイン

w3-animate-zoom クラスにより、要素をズームインします：

例

<div class="w3-animate-zoom">..</div>
Try It Yourself ❯

要素のスピン

w3-spin クラスにより、全ての要素を 360 度回転します：

例

<div class="w3-spin">..</div>
Try It Yourself ❯

無限なフェーディング

w3-animate-fading クラスは、10 秒ごとに（連続して）要素をフェードイン、フェードアウトします。

例

<div class="w3-animate-fading">..</div>
Try It Yourself ❯

全体をフェード

例

<img class="w3-animate-top"    src="img_01.jpg">
<img class="w3-animate-zoom"   src="img_02.jpg">
<img class="w3-animate-left"   src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">
Try It Yourself ❯

❮ 前章へ 次章へ ❯