css中duration是什么意思啊

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,duration是一个用于设置动画过程时间的属性。它指定了动画从开始到结束的持续时间,以毫秒或秒为单位。div { animation-duration: 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动画的持续时间,以及如何在不同的阶段进行动画。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中duration是什么意思啊

粉丝

0

关注

0

收藏

0

已有0次打赏