正弦球动画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 */ 
} 

 

---

编辑：动画延迟特性

因此进一步阅读，它看起来像你在找什么可能是mor延期财产。幸运的是，对此也有解决方案。

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单独设置。

我希望这会有所帮助。