[分享]css中duration是什么意思啊

在CSS中，duration是一个用于设置动画过程时间的属性。它指定了动画从开始到结束的持续时间，以毫秒或秒为单位。div { animationduration: 2s; } 在上面的代码中，动画的...

在CSS中，duration是一个用于设置动画过程时间的属性。它指定了动画从开始到结束的持续时间，以毫秒或秒为单位。

div {
  animation-duration: 2s;
} 

在上面的代码中，动画的duration被设置为2秒。这意味着div元素从动画开始到结束需要2秒时间。

duration可以设置为一个持续时间值，例如1s或500ms，或者可以使用毫秒或秒。此外，duration还可以与其他动画属性一起使用来创建复杂的动画效果。

div {
  animation-name: fade;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
} 

在上面的代码中，动画被命名为fade，并与duration属性一起使用。动画将从opacity为1开始（0%），然后在50%处减弱到0.5（透明度），最后返回到100%的opacity 1。

通过duration的使用，我们可以轻松地控制CSS动画的持续时间，以及如何在不同的阶段进行动画。