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 | 在 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">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 类在元素中从右侧滑动（-300 像素到 0）:
实例
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
亲自试一试 »
元素淡入淡出
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">
亲自试一试 »
