W3.CSSアニメーション
アニメーションは楽しいです！
W3.CSSアニメーションクラス
W3.CSSは、アニメーション用に次のクラスを提供します。
| クラス | 定義 |
|---|---|
| w3-animate-top | 要素を上からスライドさせます（-300pxから0） |
| w3-animate-bottom | 要素を下からスライドさせます（-300pxから0） |
| w3-animate-左 | 要素を左からスライドさせます（-300pxから0） |
| w3-アニメーション-右 | 要素を右からスライドさせます（-300pxから0） |
| w3-アニメーション-不透明度 | 要素の不透明度を0から1まで0.8秒でアニメーション化します |
| w3-animate-zoom | サイズが0〜100％の要素をアニメーション化します |
| w3-アニメーションフェード | 要素の不透明度を0から1および1から0にアニメーション化します（フェードイン+フェードアウト） |
| w3-スピン | 要素を360度回転させます |
トップをアニメート
w3-animate-topクラスは、要素を上から（-300pxから0まで）スライドさせます。
例
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
下部をアニメーション化
w3-animate-bottomクラスは、要素を下からスライドします（-300pxから0まで）。
例
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
左アニメーション
w3-animate-leftクラスは、要素を左からスライドします（-300pxから0）。
例
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
正しくアニメートする
w3-animate-rightクラスは、要素を右からスライドさせます（-300pxから0）。
例
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
要素のフェード
w3-animate-opacityクラスは、要素の不透明度を0から1まで0.8秒でアニメーション化します。
w3-animate-opacityクラスの要素をフェードインします。
例
<div class="w3-animate-opacity">..</div>
要素を拡大する
w3-animate-zoomクラスは、0から100％のサイズの要素をアニメーション化します。
w3-animate-zoomクラスで要素を拡大します。
例
<div class="w3-animate-zoom">..</div>
スピン要素
w3-spinクラスは、要素を360度回転させます。
例
<div class="w3-spin">..</div>
フェージングインフィニット
w3-animate-fadingクラスは、10秒ごとに（継続的に）要素をフェードインおよびフェードアウトします。
フェードインとフェードアウトをアニメートする
例
<div class="w3-animate-fading">..</div>
すべてフェード
例
<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">