After experimenting with CSS3 animation, I encountered an unusual issue. Adding animation-fill-mode to the "parent" <div> caused the width of the "child" <div> to be less than 100% upon completion of the animation. Can anyone shed light on why this is happening? Removing this style resolves the problem.
<div id="parent" class="fadeInLeft" >
<div id="child"> </div>
</div>
#parent {
width: 300px;
height: 300px;
background-color:blue;
border: 1px solid red;
margin:50px;
}
#child
{
position:absolute;
width:100%;
height:100px;
border:1px solid black;
z-index:10;
}
.fadeInLeft {
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
https://jsfiddle.net/7gy4b2op/
Any insights would be greatly appreciated.