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 则让元素在垂直方向上跳跃。这两个动画互相配合，让元素表现出更加逼真的效果。

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！