CSS3使用Animation如何为同一个元素添加多个动画效果？

在CSS3中，你可以通过逗号分隔的方式为同一个元素添加多个动画效果。以下是一个简单的例子，其中元素会同时进行两个动画：一个是移动（moveRight），另一个是颜色变化（colorChange）。

首先，定义你的动画：

@keyframes moveRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(200px);
    }
}

@keyframes colorChange {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blue;
    }
}

然后，将这两个动画应用到同一个元素上：

.myElement {
    animation: 
        moveRight 2s infinite alternate, 
        colorChange 3s infinite;
}

在这个例子中，myElement会同时进行moveRight和colorChange两个动画。moveRight动画会在2秒内完成，并无限次循环，每次循环结束后反向执行（由于alternate）。colorChange动画会在3秒内完成，并无限次循环。

注意，你可以为每个动画分别设置不同的持续时间（duration）、延迟（delay）、迭代次数（iteration-count）、方向（direction）等属性。只需在animation属性中按照正确的顺序列出这些值即可。例如：

.myElement {
    animation: 
        moveRight 2s 1s 5 alternate, 
        colorChange 3s 2s infinite reverse;
}

在这个修改后的例子中，moveRight动画会在1秒的延迟后开始，持续2秒，执行5次，每次循环结束后反向执行。colorChange动画会在2秒的延迟后开始，持续3秒，无限次循环，且反向执行（从100%状态开始，到0%状态结束）。