CSS 动画是一种改变网页中各种元素的外观和行为的技术。它用于通过更改元素的运动或显示来控制元素。 W3.CSS 为开发人员提供了一些很好的内置动画类。课程列表如下：
|
Sr. No. |
Class Name |
Description |
|---|---|---|
|
1. |
w3-animate-top |
The targeted element appears to slide from the top. |
|
2. |
w3-animate-bottom |
The targeted element appears to slide from the bottom. |
|
3. |
w3-animate-left |
The targeted element appears to slide from the left. |
|
4. |
w3-animate-right |
The targeted element appears to slide from the right. |
|
5. |
w3-animate-opacity |
The targeted element’s opacity changes from 0 to 1 in 1.5 seconds. |
|
6. |
w3-animate-zoom |
The targeted element’s size changes from 0 to 100% in 0.6 seconds. |
|
7. |
w3-animate-fading |
The targeted element’s opacity keeps on changing from 0 to 1 and then back to 0. |
|
8. |
w3-spin |
The targeted element’s angle with axis keeps on changing from 0 to 360 degrees. |
示例 1：在 HTML 页面中使用 w3-animate-top 动画。
HTML
Welcome To GFG
HTML
Welcome To GFG
HTML
Welcome To GFG
HTML
Welcome To GFG
HTML
Welcome To GFG
HTML
Welcome To GFG
HTML
Welcome To GFG
HTML
Welcome To GFG
输出：
示例 2：在 HTML 页面中使用 w3-animate-bottom 动画。
HTML
Welcome To GFG
输出：
示例 3：在 HTML 页面中使用 w3-animate-left 动画。
HTML
Welcome To GFG
输出：
示例 4：在 HTML 页面中使用 w3-animate-right 动画。
HTML
Welcome To GFG
输出：
示例 5：在 HTML 页面中使用 w3-animate-opacity 动画。
HTML
Welcome To GFG
输出：
示例 6：在 HTML 页面中使用 w3-animate-zoom 动画。
HTML
Welcome To GFG
输出：
示例 7：在 HTML 页面中使用 w3-animate-fading 动画。
HTML
Welcome To GFG
输出：
示例 8：在 HTML 页面中使用 w3-spin 动画。
HTML
Welcome To GFG
输出：
