如何使用CSS创建自定义动画

要使用CSS创建自定义动画，您需要遵循以下步骤：

1. 创建关键帧规则（Keyframe Rules）: 使用@keyframes规则定义动画序列中的不同关键帧。关键帧用百分号表示在动画周期内的位置。在这些规则中，您可以更改元素的属性值以创建所需的动画效果。

   例如，创建一个名为my-animation的动画，使元素从左向右移动：

   @keyframes my-animation {
     0% {
       transform: translateX(0);
     }
     100% {
       transform: translateX(100px);
     }
   }
   

2. 应用动画到元素: 使用animation属性将定义好的动画应用到HTML元素上。您需要指定动画名称、持续时间、计时函数和迭代次数。

   例如，将上面创建的my-animation动画应用到一个名为animated-element的<div>元素上：

   .animated-element {
     animation: my-animation 2s linear infinite;
   }
   

   在这个例子中，动画的持续时间为2秒，使用线性计时函数（匀速执行），并且无限次重复。

3. 自定义动画属性（可选）: 您可以在关键帧规则中自定义其他CSS属性，例如opacity、background-color等，以创建更复杂的动画效果。

   例如，创建一个名为fade-in-out的动画，使元素在显示和隐藏时产生淡入淡出效果：

   @keyframes fade-in-out {
     0% {
       opacity: 0;
     }
     50% {
       opacity: 1;
     }
     100% {
       opacity: 0;
     }
   }
   

4. 添加动画延迟（可选）: 使用animation-delay属性为动画添加开始前的等待时间。

   例如，在应用fade-in-out动画之前，让元素等待1秒：

   .animated-element {
     animation: fade-in-out 2s linear infinite, delay 1s;
   }
   

通过以上步骤，您可以使用CSS创建自定义动画并将其应用到HTML元素上。