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，以便所有的盒子都能同步，并在它们之间保持相同的距离。

有人能帮我吗？

PS只同步盒子..。

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

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%; }
}

然后，只对延迟使用框ID：

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

现在，对于棘手的同步部分，您将不得不做一些数学，以便一切都是同样的唾沫。黑客攻击最简单的方法是用与好的动画相同的步骤和相同的持续时间构建坏盒动画：

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

显然，对于anim的第二部分，您需要不同的步骤(一旦它们掉了)，所以您最好的选择是使用第二个动画：

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

因此，现在您可以自由地构建您想要的任何东西，而不必担心同步。

如果您构建了复杂的动画，我建议您使用GSAP库，这允许高度的动画定制。