浮动元素使动画平滑并反转方向？

Question

我正在尝试创建一个简单的动画，其中 3 个条形图以特定的时间间隔上升和下降。我正在使用height 和animation-delay 来实现你所看到的效果。

令人惊讶的是，当我浮动条形时，动画的方向似乎反转了。您可以在演示中切换复选框以查看它。我知道浮动元素会将其从文档流中取出，但无法理解这可能会如何改变方向。有什么解释吗？

另外，当不浮动时效果是跳跃的。当我浮动酒吧时，动画很流畅。如何摆脱跳动效应？

我尝试了什么？

我认为是inline-block 问题导致相邻的条形稍微移动，因为动画期间条形的高度较小。我试图通过设置font-size:0 来删除内联元素中的ghost space 来解决这个问题。没运气。

/*DEMO PURPOSES*/
$("input").on("change", function() {
  $(".bar").toggleClass("pull-left");
})

body {
  padding: 100px;
  font-size: 0;
}
.bar {
  margin: 0 auto;
  width: 20px;
  height: 40px;
  background: #000;
  display: inline-block;
  -webkit-animation: die 1s infinite ease-in-out;
  animation: die 1s infinite ease-in-out;
}
.delay-short {
  -webkit-animation-delay: .33s;
  animation-delay: .33s;
}
.delay-long {
  -webkit-animation-delay: .66s;
  animation-delay: .66s;
}
@-webkit-keyframes die {
  50% {
    height: 1px;
    opacity: .2;
  }
}
@keyframes die {
  50% {
    height: 1px;
    opacity: .2;
  }
}

/*DEMO PURPOSES*/

.pull-left {
  float: left;
}
label {
  font-size: 16px;
  display: block;
  margin-bottom: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<label for="floatToggle">Toggle Float
  <input type="checkbox" id="floatToggle" />
</label>

<div class="bar"></div>
<div class="bar delay-short"></div>
<div class="bar delay-long"></div>

更新 - 在接受的答案的帮助下，我终于做到了 - http://codepen.io/praveenpuglia/details/dovygr/#stats

Answer 1

http://www.w3.org/wiki/CSS/Properties/float

CSS/属性/浮动

• 左
  该元素生成一个向左浮动的块框。内容在框的右侧流动，从顶部开始。
• 对
  类似于 'left'，只是盒子向右浮动，内容在盒子的左侧流动，从顶部开始。

Float 将元素拉到包含块的顶部。您可以使用position: absolute;，但它们会重叠，因此您需要相对定位的包含块来再次给它们边界。您可以使用::before 来执行此操作而无需添加标记。

body {
    padding: 100px;
    font-size: 0;
}
.bar,
.bar::before {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 40px;
}
.bar::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #000;
    -webkit-animation: die 1s infinite ease-in-out;
    animation: die 1s infinite ease-in-out;
}
.delay-short::before {
    -webkit-animation-delay: .33s;
    animation-delay: .33s;
}
.delay-long::before {
    -webkit-animation-delay: .66s;
    animation-delay: .66s;
}
@-webkit-keyframes die {
    50% {
        height: 1px;
        opacity: .2;
    }
}
@keyframes die {
    50% {
        height: 1px;
        opacity: .2;
    }
}

<div class="bar"></div>
<div class="bar delay-short"></div>
<div class="bar delay-long"></div>