在当今的网页设计中，动画已成为吸引用户注意力的重要手段。无论是在网站的广告中，还是在等待下载完成时的加载动画，动画的运用无处不在。然而，过度使用动画可能会导致用户分心，甚至可能使他们离开网站或应用程序。在过去，如果想要使用动画，可能会选择使用动画图片、Flash或者JavaScript。但随着HTML5的出现，有了更多的选择，例如Canvas、SVG，甚至是CSS来实现动画效果。
动画能够吸引用户的注意力，这是它的优势所在。然而，如果动画使用不当，也可能导致用户分心，从而影响用户体验。在HTML5时代，不再需要依赖于动画图片或插件来创建动画效果。CSS3为提供了一种新的解决方案，即CSS3动画。
CSS3引入了一个新的CSS模块，称为CSS动画模块（CSS Animations Module Level 3）。这个模块描述了如何使用CSS3的新属性来创建简单的动画。CSS3动画是通过一个新的@keyframes规则来定义的，该规则定义了动画的帧。结合动画属性，可以实现仅由样式变化组成的简单动画。
要定义动画，需要使用@keyframes规则，并给它一个有意义的名称。在@keyframes块内，必须指定动画的起始点和结束点。可以通过使用0%或from值来指定起始点，使用100%或to值来指定结束点。还可以创建帧，通过在动画本身中指定它们的百分比。下面是一个简单的动画定义示例：
@keyframes changeBackground {
from {
background-color: white;
}
50% {
background-color: green;
}
to {
background-color: white;
}
}
在这个例子中，动画只是将背景颜色从白色变为绿色，然后再变回白色。可以使用任何CSS属性来创建动画。
定义动画本身是不够的，因为它不会自动执行。为了运行动画，需要使用动画属性将其设置到DOM元素上。CSS3动画规范中定义了一组动画函数，如animation-name和animation-duration。更喜欢使用简化的动画属性，它包括了这些函数。动画属性接受6个不同的参数，分别是名称、持续时间、时间函数、延迟、迭代次数和方向。如果省略了持续时间，那么它的默认值是0，动画将不会运行。同样，如果名称是none值，那么将停止正在运行的动画。下面是一个将动画属性设置在具有animatedDiv ID的元素上的示例：
#animatedDiv {
animation: changeBackground 2s linear 1s infinite alternate;
}
这段代码将运行之前定义的动画，持续时间为2秒，使用线性时间函数，延迟1秒，无限循环，并且方向交替。需要注意的是，大多数浏览器都添加了CSS3动画的前缀，所以之前的代码可能不会在所有浏览器中工作。例如，Chrome使用@-webkit-keyframes规则和-webkit-animation属性前缀。