[分享]css3怎么同时写两个动画

在CSS3中，我们可以通过一些简单的代码来实现同时写两个动画，让我们的网页更加生动有趣。

.box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation: move 2s infinite, rotate 1s infinite;
    animation: move 2s infinite, rotate 1s infinite;
}

@-webkit-keyframes move {
    0% { left: 0px; }
    50% { left: 50%; }
    100% { left: 0px; }
}

@keyframes move {
    0% { left: 0px; }
    50% { left: 50%; }
    100% { left: 0px; }
}

@-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} 

以上代码中，我们创建了一个.box的div，通过设置其position为relative来占据一个位置，然后设置宽高以及背景颜色。接下来，我们加入了两个动画，一个是move，一个是rotate。

我们通过-webkit-animation和animation属性来加入动画名称以及时间，用逗号分隔不同的动画。其中move是2s秒执行一次，无限循环，rotate是1s秒执行一次，也是无限循环。

接下来我们设置动画具体效果，定义了move这个动画每次变化的left值，从0px到50%再到0px，而rotate则是使用了transform属性，将元素沿Z轴旋转360度。

通过这种方式同时写入两个动画，可以为网页增加更多的视觉效果和动态效果，使得网页更加生动有趣，吸引用户的关注。