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">
自己试试 »
