Css animation to fly along a div - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Fly

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

Description

Css animation to fly along a div

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>animations with keyframes</title> 
  <style>

.box {<!--from  ww w . j a  v a2s .c  o m-->
   width: 500px;
   height: 500px;
   background-color: #ddd;
}
@keyframes around {
   0% { left: 0;top: 0; }
   25% { left: 500px; top: 0; }
   50% { left: 500px; top: 500px; }
   75% { left: 0; top: 500px; }
   100% { left: 0; top: 0;}
}
@-webkit-keyframes around {
   0% { left: 0;top: 0; }
   25% { left: 500px; top: 0; }
   50% { left: 500px; top: 500px; }
   75% { left: 0; top: 500px; }
   100% { left: 0; top: 0;}
}
p {
   display: inline-block;
   background-color: red;
   color: white;
   padding: 10px;
   margin: 0;
}
.animate {
   position: relative;
   -webkit-animation: around 4s linear infinite;
   animation: around 4s ease-out infinite;
}


      </style> 
 </head> 
 <body translate="no"> 
  <main> 
   <div class="box"> 
    <p class="animate">Hello</p> 
   </div> 
  </main>  
 </body>
</html>

Related Tutorials