正弦球动画CSS3

Question

我现在正试图制作一个有三个球的正弦波，每个球都是一个div。我正在使用CSS3关键帧来创建动画。可悲的是，球似乎随机补偿了时间。我想保留JS的方式，但是，如果有必要，我理解。

我目前的JS小提琴是：here

HTML结构：

<div id="background">
  <div id="ball_1" class="ball"></div>
  <div id="ball_2" class="ball"></div>
  <div id="ball_3" class="ball"></div>
</div>

CSS：

@-webkit-keyframes color_change {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: orange;}
    75%  {background-color: green;}
    100% {background-color: blue;}
}

@-webkit-keyframes bounce {
    0%   {transform: translateY(0px);}
    50% {transform: translateY(50px);}
    100%{transform: translateY(0px);}
}

#background{
    background-color: #000;
    height: 100px;
}

.ball{
    width: 35px;
    height: 35px;
    border-radius: 35px;
    background-color: #FFF;
    display: inline-block;   
}

#ball_1{
    -webkit-animation: bounce 4s infinite;
}
#ball_2{
    -webkit-animation: bounce 3.5s infinite;
}
#ball_3{
    -webkit-animation: bounce 3s infinite;
}

Answer 1

您正在看到宽限计算的效果，默认为ease。如果你明确告诉它不要对动画使用缓动，你会发现它的行为与你期望的一样。

Example fiddle here with no easing

这是对CSS的实质性改变：

#ball_1{
    -webkit-animation: bounce 4s linear infinite; /* Added linear */
}
#ball_2{
    -webkit-animation: bounce 3.5s linear infinite; /* Added linear */
}
#ball_3{
    -webkit-animation: bounce 3s linear infinite; /* Added linear */
}

---

编辑：动画延迟属性

因此，进一步阅读它看起来像你正在寻找的可能更多的延迟属性。幸运的是，你也有解决方案。

Example fiddle with a half second delay before animation start

这是CSS的原因：

#ball_1{
    -webkit-animation: bounce 4s 0s linear infinite;
    animation: bounce 4s 0s linear infinite;
}
#ball_2{
    -webkit-animation: bounce 4s 0.5s linear infinite;
    animation: bounce 4s 0.5s linear infinite;
}
#ball_3{
    -webkit-animation: bounce 4s 1s linear infinite;
    animation: bounce 4s 1s linear infinite;
}

动画速记中的第二个数字是delay属性。如果您不使用速记，可以使用animation-delay单独设置。

我希望这会有所帮助。