[分享]css3执行多个动画

CSS3的出现，为网页动画效果的实现提供了更多可能性。在CSS3中，多个动画可以同时执行，让网页动画效果更加生动有趣。实现多个动画的方法很简单，只需要在元素的样式中添加多个animation属性即可。...

CSS3的出现，为网页动画效果的实现提供了更多可能性。在CSS3中，多个动画可以同时执行，让网页动画效果更加生动有趣。

实现多个动画的方法很简单，只需要在元素的样式中添加多个animation属性即可。下面是一个例子：

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: rotate 2s ease-in-out infinite, translate 1s ease-in-out infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes translate {
    50% {
        transform: translateX(50px);
    }
    to {
        transform: translateX(0);
    }
} 

在上面的例子中，一个div元素同时执行了两个动画，一个是旋转动画，一个是位移动画。旋转动画的执行时间为2秒，位移动画的执行时间为1秒，两个动画都采用了ease-in-out的过渡效果，并且执行次数为无限次。

需要注意的是，在添加多个动画时，每个animation属性之间要用逗号隔开，且顺序不影响执行顺序。

通过CSS3实现多个动画，可以为网页设计带来更多的变化和动态效果。同时，也提高了网页设计者的技能和水平。