自定义动画

要自定义动画，你需要先确定你想要创建的动画类型和样式。然后，你可以使用CSS或JavaScript来实现动画效果。

以下是一些常见的CSS属性和值，可以用来创建动画：

- animation-name: 定义动画的名称。
- animation-duration: 定义动画的持续时间。
- animation-delay: 定义动画开始之前的延迟时间。
- animation-direction: 定义动画的方向（正向或反向）。
- animation-fill-mode: 定义动画结束时元素的状态。
- animation-iteration-count: 定义动画的重复次数。
- animation-timing-function: 定义动画的速度曲线。

下面是一个简单的CSS动画示例，它会使一个元素在两秒钟内缓慢地从左边滑动到右边：

.anim {
  animation-name: slide-right;
  animation-duration: 2s;
  animation-timing-function: ease-out;
}

@keyframes slide-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

这个示例中，我们定义了一个名为 `slide-right` 的动画，并将其应用于一个名为 `anim` 的元素。然后，我们使用 `@keyframes` 规则定义了动画的开始和结束状态，通过 `transform` 属性改变元素的位置。

除了CSS，你还可以使用JavaScript来创建动画。其中最常用的方式是使用 `requestAnimationFrame()` 函数。这个函数可以在每一帧结束时调用一个函数，从而实现动画效果。

以下是一个简单的JavaScript动画示例，它会使一个元素在两秒钟内缓慢地从左边滑动到右边：

const elem = document.getElementById('anim');
let pos = 0;

function animate() {
  pos += 1;
  elem.style.left = pos + 'px';
  if (pos < 100) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

在这个示例中，我们使用 `requestAnimationFrame()` 函数来不断更新元素的位置，直到元素到达指定位置为止。