在现代网页设计中，动画效果已经成为必不可少的部分，通过它们可以增加用户体验，创造更加灵活和互动的网站设计。CSS3提供了许多新的特性来实现动画效果，并且可以轻松地应用到响应式设计当中。
为什么要选择CSS3动画？
在过去，Javascript、Flash等技术被广泛应用来实现网页动画效果。然而，这些技术存在一些致命缺点，例如它们需要浏览器插件来工作，加载速度过慢，容易导致网页兼容性问题。而CSS3动画则不仅可以避免这些问题，在可访问性、兼容性等方面无疑更优秀。
CSS3动画基础
CSS3动画用于向网页添加渐变、旋转、缩放和淡入淡出的动画效果等。在开发过程中，需要使用关键帧（@keyframes）和动画属性（animation）。
关键帧（@keyframes）
@keyframes规则用于定义动画，可以控制元素在不同时间点的样式变化。可以在规则中定义从开始到结束的一系列关键帧，浏览器会根据这些关键帧生成动画效果。
-- -------------------- ---- -------
---------- ------- -
-- -
----------------- ----
-
--- -
----------------- -------
-
---- -
----------------- -----
-
-在这个例子中，动画会在0%、50%和100%处显示3个颜色变换效果。
动画属性（animation）
动画属性用于向元素添加动画效果。它们控制动画的展示时间、速度、变换和动画次数等。
animation: example 3s ease-in-out 1s infinite alternate;
在这个例子中，动画效果由example类（即定义的关键帧）来引导，展示效果为3秒，速度为渐变。还定义了1秒后展示动画，无限循环反向展示效果。
实现响应式动画效果
现在大部分网站都是响应式设计，这意味着网站需要自适应地调整布局以适应不同的设备和屏幕尺寸。利用CSS3动画，我们可以实现与响应式设计相适应的动画效果。下面我会介绍三个实现响应式动画效果的方法。
CSS3 Media Queries
CSS3 Media Queries可根据设备或浏览器的视口大小来创建响应式设计。我们可以利用@media规则，根据不同的设备大小和屏幕尺寸应用不同的CSS样式。通过媒体查询，我们可以轻松地对响应式动画做出相应调整。
-- -------------------- ---- -------
------ ---- ------ --- ----------- ------ -
---- -
--------------- ---------
------------------- ---
-
-
------ ---- ------ --- ----------- ------ --- ----------- ------ -
---- -
--------------- ---------
------------------- ---
-
-
------ ---- ------ --- ----------- ------ --- ----------- ------- -
---- -
--------------- ---------
------------------- ---
-
-在这个例子中，我们根据不同的设备屏幕大小定义了不同的动画效果。同样的，你也可以根据实际情况制定不同的规则。
CSS3 Transition
CSS3 Transition是CSS3属性之一，它提供了一种简单的效果，用于控制CSS属性的过渡。这次，我们需要使用:hover属性，当鼠标滑过链接时，我们可以使用CSS3 Transition来实现动画效果。
a {
color: red;
transition: color 2s;
}
a:hover {
color: blue;
}在这个例子中，我们将a元素的字体颜色从红色变为蓝色，并且在2秒内实现这个效果。
CSS3 Transform
CSS3 Transfrom提供一种在页面中实现2D或3D变换的方法，包括缩放、旋转、移动和倾斜等。在这里，我们将介绍两种使用CSS3 Transfrom实现响应式动画效果的方法。
1. 使用scale实现响应式缩放动画效果
在这个例子中，我们将利用CSS3 Scale属性，根据屏幕的尺寸来实现缩放效果。
-- -------------------- ---- -------
------ ---- ------ --- ----------- ------ -
---- -
---------- -----------
-
-
------ ---- ------ --- ----------- ------ --- ----------- ------ -
---- -
---------- -----------
-
-
------ ---- ------ --- ----------- ------ --- ----------- ------- -
---- -
---------- ---------
-
-在这个例子中，我们根据不同的屏幕尺寸使用不同的缩放比例。
2. 使用rotate和translate实现响应式旋转和移动动画效果
在这个例子中，我们将使用CSS3 Rotate和Translate属性来实现旋转和移动效果。
-- -------------------- ---- -------
------ ---- ------ --- ----------- ------ -
---- -
---------- ------------- -----------------
-
-
------ ---- ------ --- ----------- ------ --- ----------- ------ -
---- -
---------- ------------- ------------------
-
-
------ ---- ------ --- ----------- ------ --- ----------- ------- -
---- -
---------- ------------- ------------------
-
-在这个例子中，我们根据不同的屏幕尺寸来实现不同的旋转和移动效果。
总结
CSS3动画可以为网站增加生动的交互效果，它们具有广泛的响应式设计应用。CSS3动画既可以避免许多兼容性和性能问题，还可以提供更加优秀的用户体验。本文介绍了如何使用@keyframes和动画属性（animations），以及如何实现不同的响应式动画效果。还包括了一些示例代码，供读者参考和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64633271968c7c53b0435a2c