CSS 动画教程

CSS 动画是网页设计中常用的技术之一，它可以让网页元素动起来，增加用户体验。本教程将带你了解 CSS 动画的基本概念和使用方法。

基础概念

CSS 动画主要依赖于以下几个属性：

@keyframes：定义动画的关键帧
animation-name：指定动画名称
animation-duration：动画持续时间
animation-timing-function：动画速度曲线
animation-delay：动画延迟时间
animation-iteration-count：动画播放次数
animation-direction：动画播放方向

实例演示

以下是一个简单的 CSS 动画示例，让一个矩形元素在页面中左右移动。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS 动画示例</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: slide 5s infinite alternate;
  }

  @keyframes slide {
    0% {
      left: 0;
    }
    100% {
      left: 100%;
    }
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

在上面的示例中，.box 元素将会在 5 秒内从左侧移动到右侧，然后反向移动，无限循环。

扩展阅读

想要了解更多关于 CSS 动画的技巧和最佳实践，可以阅读以下文章：

希望这份教程能帮助你更好地理解 CSS 动画！🎉