css旋转动画定时 |css3 wap登录模板

/* 定义需要旋转动画的元素 */
.rotate-element {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
animation: rotate 2s infinite;
}
/* 定义旋转动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 定义定时器 */
.rotate-element {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
animation: rotate 2s infinite;
animation-delay: 1s; /* 设定延迟时间 */
}

在上面的代码中，大家首先定义了需要旋转动画的元素，并添加了一个名为“rotate”的动画，使元素从0度到360度不断旋转。然后，大家通过添加“animation-delay”样式属性，为动画添加了一个1秒的延迟时间，使得元素在旋转了2秒之后，等待1秒钟之后再次开始旋转。

通过添加“animation-delay”样式属性，大家可以轻松地控制元素的旋转时间和间隔，让动画呈现出更加丰富和多样的效果，提高网站的吸引力和互动性。