css3几个动画轮流

CSS3拥有丰富的动画效果，其中轮流动画是最常用的之一。下面我们来介绍几种常见的轮流动画效果。

/* 平移动画 */@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轮流动画的应用方式，通过组合不同的动画效果可以创造出更加炫酷的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！