Fly in animation in the page center - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Fly

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

Description

Fly in animation in the page center

Demo Code

ResultView the demo in separate window 

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

header{<!--from w  w  w.  ja va2s. c  o  m-->
   height: 95vh;
   position: relative;
   background: lightblue;
}
.box{
   position: absolute;
   height: 200px;
   width: 400px;
   background-color: white;
   animation: move-box 0.8s;
   transform: translate(-50%, -50%);
   left: 40%;
   top: 50%;
}
.box:before
{
   content: '';
   display: block;
   position: absolute;
   width: 10px;
   height: 200px;
   background-color: yellow;
   transform: translate(-0%, -50%);
   left: -10px;
   top: 50%;
   animation: move-border 1.1s;
}
.box h1{
   position: absolute;
   left: 25px;
   top: 50px;
   animation: fadein 2s ease-in;
}
@keyframes move-box {
   0% {
      left: 35%;
      opacity: 0;
   }
   100%{
}
}
@keyframes move-border {
   0%{
      left: -29%;
      opacity: 0;
   }
   100%{
      opacity: 1;
   }
}
@keyframes fadein {
   0% {opacity: 0;}
   100%{opacity: 1;}
}


      </style> 
 </head> 
 <body translate="no"> 
  <header> 
   <div class="box"> 
    <h1>This is some text</h1> 
   </div> 
   <p>tes test test test </p>
  </header> 
 </body>
</html>

Related Tutorials