CSS3多个动画(webkit关键帧)同步问题

Question

我正在学习css3动画…我一直在尝试同步这些盒子以相同的速度相当一段时间了。这是我的小提琴

基本上这是两种盒子的代码坏箱:

#badBox1{ 
    max-height: 21%;
    max-width: 21%;
    z-index:10;
    position: absolute;
    top: 48%;
    left: -8%;
    -webkit-animation-name:badBox1Moving;
    -webkit-animation-duration: 8s;
    -webkit-animation-delay: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes badBox1Moving{
    0%   { left:-10%;-webkit-transform: rotate(0deg);}
    50%  { left:60.5%;top:48%;}
    55%  { left:60.5%;top:66%;
           -webkit-transform: rotate(0deg); }
    60%  { left:57.5%;top:66%;
           -webkit-transform: rotate(0deg);}
    65%  { left:53%;top:66%;
           -webkit-transform: rotate(-5deg);}
    70%  { left:52%;top:67%;
           -webkit-transform: rotate(-15deg);}
    78%  {left:51%;top:68%;
          -webkit-transform: rotate(-25deg);}
    80%  { left:50%;top:69%;
           -webkit-transform: rotate(-35deg);}
    83%  { left:49%;top:70%;
           -webkit-transform: rotate(-40deg);}
    90%  { left:48%;top:71%;
           -webkit-transform: rotate(-55deg);
           opacity:1;}
    95%  {left:48%;top:72%;
          -webkit-transform: rotate(-65deg);
          opacity:0.5;}
    97%  {left:48%;top:72%;
          -webkit-transform: rotate(-75deg);
          opacity:0.3;}
    100% { left:48%;top:73%; opacity:0;
           -webkit-transform: rotate(-85deg); }
}

GoodBox:

#goodBox1{
    max-height: 17%;
    max-width: 17%;
    position: absolute;
    z-index:10;
    top: 52%;
    left: -8%;
    -webkit-animation-name:goodBox1Moving;
    -webkit-animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes goodBox1Moving{
    0%   { left:-10%;}
    65%  { left:70%;}
    75%  { left:80%;top:52%; }
    80%  { left:82%;top:70%; }
    85%  { left:85%;top:70%; }
    100% { left:110%;top:70%; }
}

我试图操纵"-webkit-animation-duration";和-webkit-animation-delay，这样所有的盒子都将同步，并且它们之间保持相同的距离。

有人能帮我一下吗?

p : 同步只是盒子…

解决方案:这是我更新的小提琴。如果有人想看。

Answer 1

首先尝试分解代码，使其更清晰，更易于调试。给你的盒子添加一个"box"类，它将获得公共属性:

.box {
    max-height: 17%;
    max-width: 17%;
    z-index:10;  
    position: absolute;
    top: 52%;
    left: -8%;
    -webkit-animation-name:goodBox;
    -webkit-animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode: forwards;
}

对动画做同样的处理，因为所有好的盒子都有相同的:

@-webkit-keyframes goodBox {
    0%   { left:-10%;}
    65%  { left:70%;}
    75%  { left:80%;top:52%; }
    80%  { left:82%;top:70%; }
    85%  { left:85%;top:70%; }
    100% { left:110%;top:70%; }
}

然后使用box ID仅用于延迟:

#goodBox3 {
   -webkit-animation-delay: 4.5s;
}

现在对于棘手的同步部分，您将不得不做一些数学运算，以便所有内容都是平等的。最简单的破解方法是使用与好的动画相同的步骤和相同的持续时间来构建坏的动画:

@-webkit-keyframes badBoxMoving1 {
    0%   {}
    65%  {}
    75%  {}
    80%  {}
    85%  {}
    100% {}
}

很明显，你需要对动画的第二部分采取不同的步骤(一旦它们掉落)，所以你最好使用第二个动画:

#badBox1{ 
    -webkit-animation-name:badBoxMoving1,badBoxMoving2; 
    -webkit-animation-duration: 7s,5s;
}

所以现在你可以自由地构建任何你想要的，而不用担心同步。

如果你构建复杂的动画，我建议你使用GSAP库，它允许高水平的动画定制。