语法:
animation-duration: time;
- time: 规定动画的持续时间。可以使用秒(s)或毫秒(ms)为单位。
示例:
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.slide-animation {
animation: slide 3s ease-in-out infinite;
}
在上述示例中,通过 @keyframes 定义了一个名为 slide 的关键帧动画,然后将这个动画应用于类名为 .slide-animation 的元素。该元素将以 3 秒的时间在 x 轴方向上往右移动 100 像素,采用缓动函数 ease-in-out,无限循环。
通过调整 animation-duration 的值,你可以使动画变得更快或更慢。这可以让你根据需要调整动画的速度,以获得所期望的效果。
转载请注明出处:http://www.pingtaimeng.com/article/detail/5982/CSS