Entry Animation

by Anupama

HTML

<div class="cont">
    <div class="anim-cont pos-rel">
        <div class="entryImg pos-abs"><img src="http://10.14.125.174:8003/Clouds-Small.png" alt="clouds" style="height:480px;"/></div>
       <img src="http://10.14.125.174:8003/img_320_480.jpeg" alt="image" class="adImg pos-abs"/>
    </div>
</div>

CSS

.pos-abs {
    position: absolute;
}
.pos-rel {
    position: relative;
}
.cont {
    width:320px;
    height:480px;
    overflow:hidden;
    position:relative;
    background:url("http://10.14.125.174:8003/app_bg_320_480.jpeg");
}
.anim-cont {
     margin-left:-106%;
    -webkit-animation: contEntry 2s linear;
    animation: contEntry 2s linear;
}
.entryImg {
    z-index:5;
    opacity:0;
    left:-50%;
    -webkit-animation:2s linear;
    animation:2s linear;
    -webkit-animation-name:imgExit,fadeOut;
    animation-name:imgExit,fadeOut;
}
.adImg {
    left: 338px; /* magic No.*/
}
@-webkit-keyframes contEntry {
   0% {
       margin-left:100%;
   }  
   75% {
       margin-left:-106%;
   }
}
@keyframes contEntry {
   0% {
      margin-left:100%;
   }  
   75% {
       margin-left:-106%;
   }
}

@-webkit-keyframes imgExit{
   0%,75% {
       left : 0%;
   }
   100% {
       left : -50%;
   }
}
@keyframes imgExit{
   0%,75% {
       left : 0%;
   }
   100% {
        left : -50%;
   }
}
@-webkit-keyframes fadeOut{
    0%,75%{opacity:1;}
    100%{opacity:0;}
}
@keyframes fadeOut
{
    0%,75%{opacity:1;}
    100%{opacity:0;}
}