css3几个动画轮流 |css定位 自适应

/* 平移动画 */
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}   
}
/* 缩放动画 */
@keyframes scale {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
/* 旋转动画 */
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

以上三种动画分别为平移、缩放和旋转。接下来大家将它们应用到HTML元素上，并设置它们的延迟时间和次数。

/* 动态样式 */
.box {
width: 100px;
height: 100px;
background: red;
animation-duration: 2s;
animation-iteration-count: infinite;
}
/* 平移动画应用 */
.move {
animation-name: move;
animation-delay: 0s;
}
/* 缩放动画应用 */
.scale {
animation-name: scale;
animation-delay: 0.5s;
}
/* 旋转动画应用 */
.rotate {
　　animation-name: rotate;
　　animation-delay: 1s;
}

最后，大家在HTML文件中设置三个元素，分别应用不同的动画效果。

以上就是CSS3轮流动画的应用方式，通过组合不同的动画效果可以创造出更加炫酷的效果。