CSS 动画指南

本文将为您介绍 CSS 动画的基础知识和实践技巧。CSS 动画可以让网页元素动起来，增加用户体验。

基础概念

CSS 动画主要基于以下三个关键帧：

• @keyframes：定义动画的名称和动画序列。
• animation-name：指定要应用的动画名称。
• animation-duration：设置动画完成一次所需的时间。

实践示例

以下是一个简单的 CSS 动画示例：

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

在上面的示例中，一个正方形会从红色变为黄色，持续时间为 4 秒。

扩展阅读

如果您想了解更多关于 CSS 动画的知识，可以阅读以下文章：

• CSS 动画教程
• CSS 动画进阶

图片示例

CSS 动画示例