Fly in animation - 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

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#animatie1{<!--from  w w w.ja v a  2 s .c  o  m-->
   border: 5px solid black;
   position:relative;
   top: 20px;
   left:100px;
   width:100px;
   height: 200px;
}
body:hover #animatie1 {
   border: 5px solid black;
   position:relative;
   top: 20px;
   left:100px;
   width:100px;
   height: 200px;
   animation:mymove 2s ;
   -moz-animation:mymove 2s ; /* Firefox */
   -webkit-animation:mymove 2s ; /* Safari and Chrome */
   -o-animation:mymove 2s ; /* Opera */
}
@-webkit-keyframes mymove {
   0% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
   }
   60% {
      opacity: 1;
      -webkit-transform: translateX(30px);
   }
   80% {
      -webkit-transform: translateX(-10px);
   }
   100% {
      -webkit-transform: translateX(0);
   }
}
@-moz-keyframes mymove {
   0% {
      opacity: 0;
      -moz-transform: translateX(-2000px);
   }
   60% {
      opacity: 1;
      -moz-transform: translateX(30px);
   }
   80% {
      -moz-transform: translateX(-10px);
   }
   100% {
      -moz-transform: translateX(0);
   }
}
@-o-keyframes mymove {
   0% {
      opacity: 0;
      -o-transform: translateX(-2000px);
   }
   60% {
      opacity: 1;
      -o-transform: translateX(30px);
   }
   80% {
      -o-transform: translateX(-10px);
   }
   100% {
      -o-transform: translateX(0);
   }
}
@keyframes mymove {
   0% {
      opacity: 0;
      transform: translateX(-2000px);
   }
   60% {
      opacity: 1;
      transform: translateX(30px);
   }
   80% {
      transform: translateX(-10px);
   }
   100% {
      transform: translateX(0);
   }
}


      </style> 
 </head> 
 <body> 
  <div id="animatie1">
    abcdef 
  </div>  
 </body>
</html>

Related Tutorials