CSS animation to move square - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Slide

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

Description

CSS animation to move square

Demo Code

ResultView the demo in separate window 

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

.box{<!--from  w w w  .  j  a va  2  s .c  om-->
   background-color:blue;
   width:100px;
   height:100px;
   margin: 0 auto;
   animation-name: test;
   animation-duration: 3s;
   animation-fill-mode: forwards;
   transition: border-radius 0.25s ease;
}
@keyframes test{
   0% {
      transform: translate(-200px)
   }
   100% {
      transform: translate(0px);
   }
}
.box:hover{
   border-radius: 100%;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="box"></div>  
 </body>
</html>

Related Tutorials