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。

總之，當前端開發需要多個動畫同時執行時，我們可以使用逗號分隔多個動畫，讓網頁的視覺效果更加生動。