css动画持续时间代码

CSS动画是网页设计中经常使用的元素之一，它可以使网页更加生动有趣，吸引用户的视觉注意力，提升网页的用户体验。其中，动画的速度也是一个非常重要的参数，通过调整动画的持续时间可以控制动画的快慢，让动画更加自然流畅。

/* 设置动画的持续时间为2秒 */animation-duration: 2s;

在CSS中，我们可以使用animation-duration属性来设置动画的持续时间。该属性的值可以使用秒（s）或毫秒（ms）单位。默认情况下，动画的持续时间为0s（即没有动画效果），如果不设置这个属性，动画不会发生。

例如，下面的代码设置一个元素的宽度在3秒钟内从100px变为200px：

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: stretch;
    animation-duration: 3s;
}
@keyframes stretch {
from {
    width: 100px;
}
to {
    width: 200px;
}
}
    

在上面的代码中，animation-name属性指定了使用@keyframes规则定义的名为stretch的动画。然后，animation-duration属性设置动画持续时间为3s，这意味着该元素将在3秒钟内从初始状态（宽度100px）变为结束状态（宽度200px）。注意，@keyframes规则定义了动画的关键帧，即动画发生的阶段，这里定义了从初态到末态的变化规则。

需要注意的是，动画的速度不仅可以通过持续时间来控制，还可以通过其他属性，如animation-timing-function（设置动画的缓动效果）、animation-delay（设置动画的延迟时间）、animation-iteration-count（设置动画重复播放的次数）等来进一步调整。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！