css 多个动画执行 |css如何使表格中的合并

.box{
width: 100px;
height: 100px;
background-color: red;
animation: move 3s ease-out forwards 1s, scale 2s ease-in-out forwards 1s;
}
@keyframes move{
from{ transform: translateX(0);}
to{ transform: translateX(200px);}
}
@keyframes scale{
from{ transform: scale(1);}
to{ transform: scale(2);}
}

上面这段代码中，大家给.box元素分别添加了两个动画：move和scale。这两个动画分别用逗号隔开，表示两个动画同时执行。其中，forwards表示动画结束后保持最后一帧的状态，1s是动画延迟的时间。

在以上代码的动画中，move动画让.box元素向右移动200px，scale动画让.box元素放大两倍。这两个动画同时执行，让.box元素更加生动。

需要注意的是，在多个动画中，如果大家同时使用了关键字forwards，则只有最后一个动画的最后一帧才会被保持。如果大家不想保持最后一帧的状态，可以使用动画属性none，如下所示：

.box{
animation: move 2s ease-out none, scale 1s ease-in-out none;
}

以上代码中，大家将forwards替换成了none。

总之，当前端开发需要多个动画同时执行时，大家可以使用逗号分隔多个动画，让网页的视觉效果更加生动。