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