W3.CSS 动画
动画很有趣！
动画很有趣！
动画很有趣！
动画很有趣！
动画很有趣！
动画很有趣！
动画很有趣！
动画很有趣！
W3.CSS 动画类
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 | 在 0.8 秒内将元素的不透明度从 0 动画到 1 |
| w3-animate-zoom | 将元素的大小从 0 动画到 100% |
| w3-animate-fading | 将元素的不透明度从 0 动画到 1，再从 1 动画到 0（淡入 + 淡出） |
| w3-spin | 将元素旋转 360 度 |
顶部动画
w3-animate-top 类将元素从顶部滑入（从 -300px 到 0）
底部动画
w3-animate-bottom 类将元素从底部滑入（从 -300px 到 0）
左侧动画
w3-animate-left 类将元素从左侧滑入（从 -300px 到 0）
右侧动画
w3-animate-right 类将元素从右侧滑入（从 -300px 到 0）
淡入元素
w3-animate-opacity 类在 0.8 秒内将元素的不透明度从 0 动画到 1。
使用 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">
自己尝试 »
