Animate div from top to middle of page slide to bottom right - HTML CSS CSS

HTML CSS examples for CSS:Animation

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

Description

Animate div from top to middle of page slide to bottom right

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">
div {<!--  w  ww .  ja v  a 2s  .c om-->
   width:301px;
   height:301px;
   background:red;
   animation:centerme 3s;
   -webkit-animation:centerme 3s;
   position:absolute;
   z-index:1000;
   animation-fill-mode:forwards;
   -webkit-animation-fill-mode:forwards;
}

@keyframes centerme  {
   0% {
      left:0;
      top:0;
   }
   
   100% {
      left:51%;
      top:51%;
      margin-top:-151px;
      margin-left:-151px;
   }

}

@-webkit-keyframes centerme  {
   0% {
      left:0;
   }
   
   100% {
      left:51%;
      margin-left:-151px;
   }

}
</style> 
 </head> 
 <body> 
  <div></div>  
 </body>
</html>

Related Tutorials