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

时间:2015-06-02 05:49:27

标签: css animation css-float height

我正在尝试创建一个简单的动画,其中3个小节以特定时间间隔上下移动。我正在利用heightanimation-delay来实现您所看到的效果。

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

此外,当没有浮动时,效果会很突然。当我浮动条形图时,动画是平滑的。我怎样摆脱跳跃效应?

我尝试了什么?

我认为这是inline-block问题,因为在动画过程中条形高度较小,相邻的条移动了一点。我尝试通过设置font-size:0来删除内联元素中的鬼空间来解决该问题。没运气。

/*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

1 个答案:

答案 0 :(得分:2)

  

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

     

CSS /属性/浮

     
      

  •   该元素生成一个浮动到左侧的块框。内容流在框的右侧,从顶部开始
  •   

  •   与“左”类似,除了框向右浮动,内容在框的左侧流动,从顶部开始
  •   

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>