css设置动画

要在CSS中设置动画，你可以使用@keyframes规则来定义动画的过渡效果，然后使用animation属性将其应用于元素。

以下是一个设置淡入淡出动画的例子：

/* 定义动画 */
@keyframes fade-in-out {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* 应用动画 */
.element {
  animation: fade-in-out 2s ease-in-out infinite;
}

在这个例子中，我们定义了一个名为fade-in-out的动画，它会在0%到50%之间将元素的透明度从0变为1，再在50%到100%之间将其透明度从1变为0，然后无限循环这个过程。我们把这个动画应用于名为element的元素，并设置了2秒的动画时长，以及ease-in-out的动画缓动函数。

你可以使用不同的属性、关键帧和缓动函数来创建不同种类的动画效果。要了解更多关于CSS动画的内容，建议你查看MDN文档或其他相关资源。

相关问题

css 设置动画执行时间

CSS中可以使用animation-duration属性来设置动画执行的时间，单位为秒或毫秒。例如，如果要让一个元素的动画在2秒内完成一个周期，可以这样设置：

animation-duration: 2s;

如果要让动画在500毫秒内完成一个周期，可以这样设置：

animation-duration: 500ms;

需要注意的是，animation-duration属性只设置动画执行的时间，不包括动画延迟的时间。如果需要设置动画延迟的时间，可以使用animation-delay属性。

css 设置图片动画

可以使用CSS3的transition或animation属性来设置图片动画。

使用transition属性：

img {
  transition: transform 1s;
}

img:hover {
  transform: rotate(360deg);
}

上面的代码将会使鼠标悬停在图片上时，图片会以1秒的时间完成360度的旋转。

使用animation属性：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

img {
  animation: rotate 1s infinite linear;
}

上面的代码将会使图片永久地以1秒的时间完成360度的旋转。