Animation bug, precedence of animation, when animation applied to child and parent - css

Question

I just built a small animation and it does exactly as I want it to, except a small problem, I have bounceIn animation on 2 HTML elements, my HTML is below:
<div class="test animated bounceInDown">
<span class="animated bounceInDown delay">I am animation</span>
</div>
My CSS:
.test {
height: 200px;
width: 200px;
background-color:yellow;
display: table;
}
.test span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.animated {
-webkit-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
.delay {
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
Now of course span is a child of the div, on the span I have a animation-delay, problem is, the animation on the span has a small bug: it follows the animation of the div and then executes its own animation, I.E. on page load, the span element still bounces in with the div even though I have an animation delay.
I am more interested in WHY this is happening than HOW to solve my problem. Here's a fiddle to see what I am talking about: Fiddle

Answer 1

Nothing is wrong about your animation. Just that the configuration of your animation is not good.
The problem appear because before the animation trigger. The text will be render within the animating parent.
When your text got triggered by animation it will animation on it own. Which mean it will be move up with 3000px.
=> should concern about animation a child in within an animating parent.
When you apply animation to an element, all child elements too undergo the animation. So, in your case, span tag too animates with the parent.
After time in animation-delay's value passes after page load, the animation on child span takes place.
This isn't a bug. Its the way animations work on child elements.
To fix the problem: Just simply use opacity with your animation and animation-fill-mode and it will do the trick
http://jsfiddle.net/ev5ur00n/2/
.test {
height: 200px;
width: 200px;
background-color:yellow;
display: table;
}
.test span {
display: table-cell;
vertical-align: middle;
text-align: center;
opacity: 0;
}
.animated {
-webkit-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
.delay {
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: none;
opacity: 1;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
.bounceInDown2 {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
<div class="test animated bounceInDown">
<span class="animated bounceInDown2 delay">I am animation</span>
</div>