我正在尝试创建一个简单的动画,其中3个小节以特定时间间隔上下移动。我正在利用height
和animation-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
答案 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>