W3.CSS Animations (动画)
W3.CSS为动画提供以下类：
| 类 | 定义 |
|---|---|
| w3-animate-top
|
从顶部滑动元素（-300px 至0） |
| w3-animate-bottom
|
从底部（-300px 到0）滑动元素 |
| w3-animate-left
|
从左侧滑动一个元素（从 -300px 到0） |
| w3-animate-right
|
从右边滑动一个元素（从 -300px 到0） |
| w3-animate-opacity
|
在 1.5 秒内使元素的不透明度从 0 变为 1 |
| w3-animate-zoom
|
动画大小从 0 到 100％ 的元素 |
| w3-animate-fading
|
从 0 到 1 和 1 到 0 动画化元素的不透明度（淡入+淡出） |
| w3-spin | 将元素旋转 360 度 |
动画顶部
w3-animate-top 类能够轻松对齐顶部（从 -300px 到 0）的元素：
实例
<div class="w3-container">
<h1 class="w3-center w3-animate-top">动画很有趣！</h1>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
底部动画
w3-animate-bottom 类能够轻松对齐底部（从 -300px 到 0）的元素：
实例
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">动画很有趣！</h1>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
左部动画
w3-animate-left 类在元素中从左（-300px 到 0）滑动：
实例
<div class="w3-container">
<h1 class="w3-center w3-animate-left">动画很有趣！</h1>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
右部动画
w3-animate-right 类在元素中从右（-300px 到 0）滑动：
实例
<div class="w3-container">
<h1 class="w3-center w3-animate-right">动画很有趣！</h1>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
淡入元素
w3-animate-opacity 类设置动画的元素的不透明度，从 0 到 1 用时 0.8 秒。
淡入w3-animate-opacity类的元素：
缩放元素
w3-animate-zoom 类设置动画从 0 到 100％ 的大小的元素。
使用 w3-animate-zoom 类放大元素：
自旋元素
w3-spin 类旋转元素 360 度：
褪色效果
w3-animate-fading 类设置元素的退出效果，每 10 秒变淡（连续地）：
全部淡入
实例
<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">
尝试一下 »
点击“尝试一下”按钮查看在线实例