css中怎么让div多条动画

在CSS中，我们可以通过定义不同的动画，让一个DIV元素同时展示多条动画效果，让页面更加生动有趣。下面就来看看如何实现。

/* 定义两条不同的动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes slide {
    from {
        left: 0;
    }
    to {
        left: 100px;
    }
}

/* 在一个DIV元素上同时应用两条动画 */
div {
    animation: rotate 2s linear infinite, slide 1s ease-out infinite alternate;
} 

上面的代码中，我们首先定义了两个不同的动画效果：一个是让元素旋转360度，一个是让元素向右移动100px。然后，我们在一个DIV元素上同时应用了两条动画，用逗号来隔开不同的动画。

需要注意的是，在无限循环的情况下同时应用多条动画时，动画间的时间差也需要考虑，调整好每个动画的时间长度和时间函数以达到最好的效果。