animate。css 动画时间

animate.css是一款非常流行的CSS动画库，它提供了大量的动画效果，可以实现各种视觉效果，从而使网站更具活力。animate.css中每个动画效果的持续时间是不同的，下面我们来学习如何调整动画时间长度。

/* 动画时间控制 */
.animated {
animation-duration: 1s;
}
/* 类似弹跳的效果 */
.bounce {
animation-name: bounce;
}
/* 类似闪烁的效果 */
.flash {
animation-name: flash;
}
/* 类似旋转的效果 */
.rotateIn {
animation-name: rotateIn;
}

在上面的示例代码中，我们为样式表中所有的animated类添加了animation-duration属性，用于控制动画效果持续的时间。具体来说，上面的代码表示动画效果持续1秒钟。

除了animation-duration属性以外，我们还可以通过修改animation-delay属性来控制动画效果的时间延迟，例如：

/* 动画时间控制 */
.animated {
animation-duration: 1s;
}
/* 动画延迟控制 */
.delay-2s {
animation-delay: 2s;
}
/* 类似弹跳的效果 */
.bounce {
animation-name: bounce;
}
/* 类似旋转的效果 */
.rotateIn {
animation-name: rotateIn;
}

上面的代码中，我们为样式表中所有的animated类添加了animation-duration属性和delay-2s类，用于控制动画效果持续的时间和延迟的时间，具体来说，上面的代码表示动画效果持续1秒钟，并且延迟2秒开始播放。

通过上述示例，我们可以轻松地掌握animate.css中动画效果的时间控制方法，从而实现网站中更加丰富的动画效果。

查看更多关于animate。css 动画时间的详细内容...