css3同时写多个动画

CSS3引入了众多动画实现方式，其中之一是同时书写多个动画。多个动画可以使元素在页面中更具生动感和吸引力。同时书写多个动画可以让动画之间互相配合，达到更好的效果。

.animated {
  animation: move 2s linear,jump 1s ease-in-out;
}

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

@keyframes jump {
  0% { transform: translateY(0); }
  25% { transform: translateY(-50px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-25px); }
  100% { transform: translateY(0); }
}

上述代码中的动画效果示例，首先定义了一个类名为 animated 的元素，同时书写了两个动画 move 和 jump，并分别设置不同的动画时长和渐变。动画 move 使元素在水平方向做匀速运动，而动画 jump 则让元素在垂直方向上跳跃。这两个动画互相配合，让元素表现出更加逼真的效果。

同时书写多个动画是比较常见的一种动画效果设计方式，可以通过不同的动画组合，实现更加多样化的效果。