W3.CSSアニメーションを使用すると、スライドすることができ、HTML要素をフェードイン。
アニメーションは楽しいです！
アニメーションは楽しいです！
アニメーションは楽しいです！
アニメーションは楽しいです！
アニメーションは楽しいです！
アニメーションは楽しいです！
アニメーションは楽しいです！
アニメーションは楽しいです！
Elementsでスライド
上、下、左またはW3-animate- *クラスで画面の右からの要素でスライド：
| クラス | 定義 | |
|---|---|---|
| W3-アニメーショントップ | 0PXに画面の一番上から要素300ピクセルをアニメーション化 | それを試してみてください |
| W3-アニメーションボトム | 0PXに画面の下部から要素300ピクセルをアニメーション化 | それを試してみてください |
| W3-アニメーション - 左 | 0PXに画面の左から要素300ピクセルをアニメーション化 | それを試してみてください |
| W3-アニメイト右 | 0PXに、画面の右側から要素300ピクセルをアニメーション化 | それを試してみてください |
Elementsでフェード
W3-アニメイト-不透明度クラスを持つ要素をフェードイン：
Elementsで拡大
W3-アニメイトズームクラスを持つ要素でズーム：
スピンの要素
W3-スピンクラスに任意の要素を360度スピン：
無限フェージング
すべてのフェード
例
<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"> »それを自分で試してみてください