Create text sliding in with transition animation - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Text

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Text

Description

Create text sliding in with transition animation

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

body {<!--from  w  w  w .  ja v a 2s  . c o  m-->
   margin: 0;
   padding: 0;
   background-color: #12475f;
   color: white;
   line-height: 1.6;
   text-align: center;
}
.container {
   max-width: 960px;
   margin: auto;
   padding: 0 30px;
}
#showcase {
   height: 300px;
}
#showcase h1 {
   font-size: 50px;
   line-height: 1.3;
   position: relative;
   animation-name: heading;
   animation-duration: 3s;
   animation-fill-mode: forwards;
}
@keyframes heading {
   0% {top: -50px;}
   100% {top: 200px}
}
#content {
   position: relative;
   animation-name: content;
   animation-duration: 3s;
   animation-fill-mode: forwards;
}
@keyframes content {
   0% {right: 100%;}
   100% {right: 0;}
}
.btn {
   width: auto;
   height: 60px;
   line-height: 60px;
   display: inline-block;
   text-decoration: none;
   border: white 1px solid;
   margin-top: 40px;
   color: white;
   opacity: 0;
   -webkit-animation-name: btn;
   -webkit-animation-duration: 3s;
   -webkit-animation-delay: 3s;
   animation-fill-mode: forwards;
   transition-property: transform;
   transition-duration: 1s;
}
.btn:hover {
   transform: rotateY(180deg);
}
@keyframes btn {
   0% {opacity: 0;}
   100% {opacity: 1;}
}
span {
   padding: 1rem 2rem;
}


      </style> 
 </head> 
 <body translate="no"> 
  <header id="showcase"> 
   <h1>Welcome To My Site</h1> 
  </header> 
  <div id="content" class="container"> 
   <p>test test test test test test testtest test test test test test testtest test test test test test test
   test test test test test test testtest test test test test test testtest test test test test test test
   test test test test test test testtest test test test test test testtest test test test test test testtest test test test test test test
   test test test test test test testtest test test test test test testtest test test test test test test
   .</p> 
  </div> 
  <a href="#" class="btn"> <span>Read More</span> </a>  
 </body>
</html>

Related Tutorials