Does a floating element make the animation smooth and reverse direction?
I am trying to create a simple animation where 3 bars go up and down at a specific time interval. I am using height
and animation-delay
to achieve the effect, as you can see.
Surprisingly, when I float in the bars, the direction of the animation seems to change. You can toggle the checkbox in the demo to see this. I know that a floating element takes it out of the document flow, but can't figure out how it can change direction. Any explanations?
In addition, the effect is unstable in the event of default. When I float on the bars, the animation is smooth. How can I get rid of the hopping effect?
What have I tried?
I thought it was a problem inline-block
that makes adjacent stripes slightly shifted due to the lower height of the stripe during animation. I tried to solve this by setting font-size:0
to remove ghost space among inline elements. Bad luck.
/*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>
Update - . With the accepted answer, I made it this definitively - http://codepen.io/praveenpuglia/details/dovygr/#stats
source to share
http://www.w3.org/wiki/CSS/Properties/float
Css / properties / float
- left
The element generates a block box that moves to the left. Content goes on the right side of the window , starting at the top .- right
Same as "left", except that the margin moves to the right and the content moves to the left of the window , starting at the top .
Float pulls the element to the top of the containing block. You can use position: absolute;
, but they will overlap, so you need to relatively position the containing blocks to give them borders again. You can use it ::before
for this without adding any markup.
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>
source to share