CSS3 border animation with enlarged circle shape - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:border

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. border

Description

CSS3 border animation with enlarged circle shape

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Ghost in the box</title> 
  <style>

body {<!--  w ww  .j a  va  2 s  .  c o  m-->
   background-color: #333;
   height: 230px;
}
.lluv {
   width: 230px;
   height: 230px;
   border: solid red 1px;
   position: absolute;
   left: calc(50% - 115px);
}
.ondas1 {
   border-radius: 50%;
   border-width: 3px;
   border-style: solid;
   position: absolute;
   animation: ondas1 1s ease-out forwards;
}
@keyframes ondas1 {
   0% {
      width: 0px;
      height: 0px;
      top: calc(50% - 0px);
      left: calc(50% - 0px);
      border-color: rgba(255, 255, 255, .7);
   }
   100% {
      width: 200px;
      height: 200px;
      top: calc(50% - 100px);
      left: calc(50% - 100px);
      border-color: rgba(255, 255, 255, 0);
   }
}


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

Related Tutorials