CSS3 Animation (Slide/Fade Text)

by Mukul kant

HTML

<div class="footer1">
<div class="content1">
<h1 class="animated fadeInLeft">IM A TEST</h1>
<h2 class="animated3 fadeInLeft">YES</h2> 
</div>
</div>

CSS

.footer1 {  
z-index: 9999;  
height: 180px;
width: 100%;
pointer-events: visibleFill; 
}
  

.content1 {
position: relative;
margin: 0 auto;
width: 80%;
height: 70px;
z-index: 9999;
max-width: 1278px;
overflow:hidden;   
}

.content1 h1{
font-family:arial;
font-size: 50px;
color: #000;
z-index: 9999;
height: 50px;
width: 100%;    
margin: 0 0 0 20px;
padding:0;
}

.content1 h2{
font-family:arial;
font-size: 20px;
color: #000;
z-index: 9999;
height: 50px;
width: 100%;    
margin: 0 0 0 20px;
padding:0;

}

.animated
{  
-webkit-animation-fill-mode:both;
-webkit-animation-duration:3s;
}

.animated3
{
-webkit-animation-fill-mode:both;
-webkit-animation-duration:3s;
-webkit-animation-delay:1s; 
}

@-webkit-keyframes fadeInLeft {
	0%   { opacity: 0; -webkit-transform: translateX(-20px); }
    25%  { opacity: 1; -webkit-transform: translateX(0); }
    75%  { opacity: 1; -webkit-transform: translateX(0); }
    100% { opacity: 0; -webkit-transform: translateX(20px); }
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
}