Question

我正在研究css3动画...... 我一直试图以相同的速度同步这些盒子一段时间了。这是My fiddle

基本上这些是两种盒子的代码坏盒子：

#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 ：同步只是方框......

解决方案：这是my updated fiddle ..如果有人想看。

Answer 1

首先尝试对代码进行分解，以使代码更清晰，更易于调试。添加一个＆＃34;框＆＃34;将您的方框分类到将获得公共属性：

.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% {}
}

显然你需要为动画的第二部分（一旦它们掉落）需要不同的步骤，所以你最好的选择是使用第二部动画：

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

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

如果您构建复杂的动画，我建议您使用GSAP库，以允许高级别的动画自定义。

CSS3多动画（webkit关键帧）同步问题

1 个答案: