animation-duration 是 CSS 中用于设置动画持续时间的属性。该属性定义了从动画开始到动画结束所经过的时间。通过调整 animation-duration,你可以控制动画的速度。

语法:
animation-duration: time;

  •  time: 规定动画的持续时间。可以使用秒(s)或毫秒(ms)为单位。


示例:
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.slide-animation {
  animation: slide 3s ease-in-out infinite;
}

在上述示例中,通过 @keyframes 定义了一个名为 slide 的关键帧动画,然后将这个动画应用于类名为 .slide-animation 的元素。该元素将以 3 秒的时间在 x 轴方向上往右移动 100 像素,采用缓动函数 ease-in-out,无限循环。

通过调整 animation-duration 的值,你可以使动画变得更快或更慢。这可以让你根据需要调整动画的速度,以获得所期望的效果。


转载请注明出处:http://www.pingtaimeng.com/article/detail/5982/CSS