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

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/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 将元素拉到包含块的顶部。你可以使用 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>

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

floating an element makes the animation smooth and reverse the direction?

css

height

animation

css-float

CSS/Properties/float