css3动画一直重复 |css悬浮导航菜单动画

/* 定义一个动画keyframes */
@keyframes repeat {
from {
/* 定义起始状态 */
transform: translateX(0);
}
to {
/* 定义结束状态 */
transform: translateX(100px);
}
}
/* 添加动画效果 */
.animated {
animation: repeat 2s infinite;
/* 2s指动画的持续时间，infinite指动画无限循环 */
}

从上面的代码可以看到，大家首先定义了一个名为“repeat”的动画关键帧，其中定义了动画的起始状态和结束状态。接下来，大家将这个动画效果绑定到一个类名为“animated”的元素上，并通过animation属性指定动画的持续时间和循环次数，其中infinite指示动画应该一直循环下去。

通过这种方式，大家可以轻松地实现一种一直重复循环的动画效果，使网页更具动态感，吸引用户的眼球。当然，在实际应用中，大家还可以通过调整动画关键帧的定义来实现更加多样化的动画效果。