CSS如何设置动画效果

在 CSS 中，可以使用 @keyframes 规则和 animation 属性来设置动画效果。@keyframes 规则定义动画的关键帧，而 animation 属性指定动画的名称、持续时间、延迟时间、动画类型等属性。

以下是一个设置动画效果的示例代码：

@keyframes my-animation {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

div {
  animation: my-animation 2s ease-in-out infinite;
}

在上面的代码中，@keyframes 规则定义了一个名为 my-animation 的动画，它包含三个关键帧，分别对应动画开始、中间和结束时的样式。在这个示例中，动画将使元素从原始大小缩放到 1.2 倍大小，然后再缩放回原始大小。

animation 属性将这个动画应用到 div 元素上。它指定了动画名称为 my-animation，持续时间为 2 秒，过渡类型为缓入缓出，动画无限循环。

除了上述属性外，还可以使用其他属性来控制动画效果，例如：

• animation-delay：指定动画延迟时间。
• animation-direction：指定动画播放方向。
• animation-fill-mode：指定动画播放前后元素的样式。
• animation-iteration-count：指定动画播放次数。
• animation-timing-function：指定动画类型。

例如，以下代码将动画延迟时间设置为 1 秒，并指定动画播放方向为反向：

div {
  animation: my-animation 2s ease-in-out infinite;
  animation-delay: 1s;
  animation-direction: reverse;
}

请注意，不同浏览器可能对某些动画效果的支持有所不同。因此，您应该在不同浏览器中测试您的样式，并根据需要进行调整。