animate an icon for with CSS - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Image

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

Description

animate an icon for with CSS

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>CSS3 Locker </title> 
  <style>

.unlocker{<!--from w w  w . j  a  v  a2s . c  o m-->
   width: 28px;
   height: 24px;
   background: transparent;
   border: 6px solid grey;
   border-bottom: 0;
   border-radius: 15px 15px 0 0;
   position: absolute;
   top: -24px;
   left: 12px;
   -webkit-transition: all .3s;
}
.lock{
   content: "";
   width: 50px;
   height: 40px;
   background: grey;
   position: relative;
   border-radius: 4px;
   margin: 70px;
   left: -18px;
   top: 20px;
   -webkit-transform: rotateY(0deg);
}
.lock:hover .unlocker{
   -webkit-transform: rotateY(-180deg);
   -webkit-transform-origin: 25px 0;
}
*, *:before, *:after {
   -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}


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

Related Tutorials