css3同时写多个动画效果

CSS3是当前前端开发中应用最广泛的技术之一，它可以让我们实现各种华丽的动画效果。其中，多个动画效果的组合应用也非常常见，下面介绍几种同时使用多个动画的方法。

/* 示例代码1：使用逗号分隔多个动画属性 */
.Box {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
  animation: 
    move 2s linear 1s,scale 1s ease-in-out infinite alternate;
}

@keyframes move {
  0% { left: 0; }
  50% { left: 400px; }
  100% { left: 0; }
}

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

上述代码中的.Box元素同时应用了移动和缩放两个动画效果。使用逗号分隔的方式在不同的动画属性之间进行分隔，其中move动画在1秒后开始执行，scale动画则无限循环执行。

/* 示例代码2：使用两个animation属性 */
.Box {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
  animation: move 2s linear 1s;
  animation-name: move,scale;
  animation-duration: 2s,1s;
  animation-timing-function: linear,ease-in-out;
  animation-delay: 1s,0;
  animation-iteration-count: 1,infinite;
}

@keyframes move {
  0% { left: 0; }
  50% { left: 400px; }
  100% { left: 0; }
}

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

这段代码中，通过连续使用两个animation属性来实现对多个动画效果的同时控制。其中第一个animation属性用于移动动画，第二个animation属性用于缩放动画，通过设置不同的动画属性值来实现对各个动画效果细致的调控。

除了上述两种方法，我们还可以使用关键词from和to对动画执行的时间节点进行控制，从而实现更加灵活的动画组合方式。总之，CSS3提供了非常丰富的动画属性和函数，前端开发人员可以根据实际需求选择最合适的方法来创建出各种各样的动画效果。