Animate child div after parent div has completed animation - css

Question

I have 2 div ("a" and "b") I'm trying when div "a" slide Up and stop, div "b"
slide Up inside div "a".
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUp"> </div>
</div>
Here is my JSFiddle
#a {
width: 100px;
height: 50px;
background-color: #000;
border-radius: 10px;
margin: 0 auto;
position: relative;
}
#b {
width: 100%;
height: 10px;
background-color: #860169;
position: absolute;
bottom: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
#keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUpChild"> </div>
</div>

Answer 1

translate3d(0, y%, 0) will only translate the element in Y-axis by y% the height of the element. That is 100% would translate it by 10px (height of the child) and 10% would translate it by 1px. In addition you are positioning the element at the bottom of the parent and hence translating it by 1px (end state) is not going to have any visual effect.
You need to do the following changes to achieve the effect that you are looking for:
Use a different animation for the child element, which will move the element from bottom: 0px to bottom: calc(100% - 10px) (the minus 10px is for the height of the element). The first keyframe at bottom: 0px positions the element at the bottom of the container and then gradually move it to the top of the parent element.
Add an animation-delay to the child element that is equal to the animation-duration of parent element. This is required to make sure that the child element does not start animation before the parent element has reached the top.
Note that since you have border-radius set the to the child for the bottom-left and bottom-right, the element won't look nice once it has reached the top.
#a {
width: 100px;
height: 50px;
background-color: #000;
border-radius: 10px;
margin: 0 auto;
position: relative;
}
#b {
width: 100%;
height: 10px;
background-color: #860169;
position: absolute;
bottom: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
#keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.slideInUpChild {
-webkit-animation-name: slideInUpChild;
animation-name: slideInUpChild;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
#keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUpChild"> </div>
</div>
One simple way to overcome the border-radius problem that I have mentioned above would be to do away with the border-radius and let the overflow: hidden setting on the parent take care of it.
#a {
width: 100px;
height: 50px;
background-color: #000;
border-radius: 10px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#b {
width: 100%;
height: 10px;
background-color: #860169;
position: absolute;
bottom: 0;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
#keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.slideInUpChild {
-webkit-animation-name: slideInUpChild;
animation-name: slideInUpChild;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
#keyframes slideInUpChild {
from {
bottom: 0;
}
to {
bottom: calc(100% - 10px);
}
}
<div id="a" class="animated slideInUp">
<div id="b" class="animated slideInUpChild"> </div>
</div>