[分享]css3怎么同时写多个动画效果

CSS3 可以同时实现多个动画效果，这为网页设计师提供了更多的创意空间和灵活性。下面我们来学习一下如何同时编写多个动画效果。 div { animation: move 2s easeout 1s,...

CSS3 可以同时实现多个动画效果，这为网页设计师提供了更多的创意空间和灵活性。下面我们来学习一下如何同时编写多个动画效果。

div {
    animation: move 2s ease-out 1s, rotate 1s;
}

@keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(400px); }
}

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

上述代码实现了一个 div 元素同时进行了移动和旋转两个动画效果。

在样式中，动画属性可以同时指定多个值，这些值用逗号隔开。例如，上述代码中的 animation 属性就同时指定了 move 和 rotate 两个动画效果。

接下来是两个 @keyframes 规则，分别描述了 move 和 rotate 动画的具体行为。同样的，两个规则也是用逗号隔开的。

在实际开发中，我们也可以同时指定多个 @keyframes 规则，实现更复杂的动画效果。

div {
    animation: move 2s ease-out 1s, rotate 1s, fade-in 2s;
}

@keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(400px); }
}

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

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
} 

上述代码实现了一个 div 元素同时进行了移动、旋转和淡入三个动画效果。

总结起来，同时编写多个动画效果，只需要在 animation 和 @keyframes 块中使用逗号隔开不同的动画效果即可。