css - float 元素使动画平滑并反转方向？

Question

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

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

另外，当不 float 时，效果是跳跃的。当我 float 条时，动画很流畅。我怎样才能摆脱跳跃效果？

我尝试了什么？

我认为是 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/Properties/float

• left
  The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top.
• right
  Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.

Float 将元素拉到包含 block 的顶部。您可以使用 position: absolute; 但它们会重叠，因此您需要 relatively positioned containing blocks 再次给它们边界。您可以使用 ::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>