CSS3中设置动画播放时间

最新推荐文章于 2025-07-06 11:02:20 发布

qq_39412143

最新推荐文章于 2025-07-06 11:02:20 发布

阅读量7k

点赞数 1

分类专栏：编程

编程专栏收录该内容

72 篇文章

订阅专栏

本文详细介绍了如何使用animation-duration属性来控制CSS3动画的播放时间，通过具体案例展示了矩形如何通过10秒时间平滑过渡到圆形，强调了动画时间在视觉效果中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

语法规则

animation-duration: [,]*
取值为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）。

案例演示：

制作一个矩形变成圆形的动画，整个动画播放时间持续了10s钟。

HTML:

<div>Hover Me</div>

CSS:

@keyframes toradius{
  from {
    border-radius: 0;
  }
  to {
    border-radius: 100%;
  }
}
div {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  background: green;
  margin: 20px auto;
}
div:hover {
  animation-name: toradius;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-delay: .1s;
}