28、CSS 变换、过渡与动画指南

CSS 变换、过渡与动画指南

1. 网页动画添加方式概述

在网页发展历程中，为网站添加动画有几种常见方式：
- 动画 GIF ：简单的动画形式，能在图像内提供基本动画效果。
- Adobe Flash ：曾是创建复杂动画、游戏和网页应用的首选工具，但存在学习曲线陡峭、无法与页面其他 HTML 元素交互以及在许多移动设备上不可用等缺点，如今已不如以往流行。
- JavaScript ：可对网页上的任何元素进行动画处理，但需要学习完整的编程语言。
- CSS ：能对页面上的任何 HTML 元素进行移动、变换和动画处理，无需借助其他技术。

2. CSS 变换属性

CSS 包含多个用于变换网页元素的属性，可通过旋转、缩放、移动或沿水平和垂直轴扭曲（倾斜）元素来实现。基本的 CSS 变换属性是 transform ，使用时需指定变换类型和变换程度的值。

2.1 浏览器支持与厂商前缀

大多数主流浏览器（如 Internet Explorer 9、Safari、Chrome、Firefox 和 Opera）都支持变换属性。但在 Safari 和 Internet Explorer 9 中使用时，需要添加厂商前缀，示例代码如下：

-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);