Dziwne przycinanie animacji w css

Question

Witam,dlaczego pojawia sie takie przycięcie mojej animacji wykonanej w css,oraz jak naprawic ten problem

https://codepen.io/DorianBajorek/pen/NvXBPj

Answer 1

cały problem jest w tym że użyłeś float: left  gdy jeden div dojedzie na chwile na górę to przez moment znika czasem tego ani nie widzisz ale float czuwa i wie że div zniknął wiec przesuwa pozostałe divy, poniżej pewnie jedno z wielu rozwiązań problemu:

body
{
  background-color:gray;
  
}
.block
{
  width:30px;
  height:30px;
  border-radius:30px;
  border:3px solid #db5dba ;
  box-sizing:border-box;
  background-color:gray;
  position: absolute;
  animation-name:fly;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  
}
#b1
{
  top:250px;
  animation-duration:7s;
}
#b2
{
  top:200px;
  left: 50px;
  animation-duration:10s;
}
#b3
{
  top:180px;
  left: 100px;
  animation-duration:5s;
}
@keyframes fly
{
  100%
  {
     top:-35px;
  }
}

 

Comments

A to jednak on jest przyczyną tego.Dzięki