[分享]css3执行多个动画效果

CSS3是一种用于网页设计的样式语言，可以实现多种动画效果，例如旋转、缩放、平移、渐变等。本文将为您介绍CSS3执行多个动画效果的方法。.box{ width: 100px; height: 100p...

CSS3是一种用于网页设计的样式语言，可以实现多种动画效果，例如旋转、缩放、平移、渐变等。本文将为您介绍CSS3执行多个动画效果的方法。

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    animation: rotate 2s linear 0s infinite, scale 1s linear 0s infinite;
}

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

@keyframes scale {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
} 

首先我们定义一个class为.box的元素，并且设置它的位置在页面的中心，设置多个动画效果需要在animation属性中使用逗号分隔不同的动画属性。

接下来定义两个@keyframes，即关键帧动画，一个叫做rotate，另一个叫做scale。其中rotate从0度旋转到360度，scale在0%和100%处元素大小为1，中间50%时大小变为1.5。

最后我们需要使用这个class来为元素添加样式，通过控制animation的属性值，我们可以实现多个动画效果同时执行的效果。

总体来说，CSS3执行多个动画效果的方法非常简单，只需要将需要使用的动画效果通过逗号分隔后添加到animation属性中即可。