Make arc-in animation - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Size

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

Description

Make arc-in animation

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Islam Ibakaev</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>

.social-icons {<!--from   w  w  w .  j  av a2  s  . c  om-->
   display: inline-block;
   position: absolute;
   top: 40%;
   left: 35%;
   opacity: .2;
   -webkit-transform: perspective(500px) rotateY(180deg) translateZ(300px);
   transform: perspective(500px) rotateY(180deg) translateZ(300px);
}
.social-icons:hover {
   -webkit-transform-origin: center;
   transform-origin: center;
   -webkit-animation: rotation 3s ease forwards;
   animation: rotation 3s ease forwards;
}
@-webkit-keyframes rotation {
   from {
      opacity: .2;
      -webkit-transform: perspective(1500px) rotateY(180deg) translateZ(700px);
      transform: perspective(1500px) rotateY(180deg) translateZ(700px);
   }
   to {
      opacity: 1;
      -webkit-transform: perspective(1500px) rotateY(0deg) translateZ(0px);
      transform: perspective(1500px) rotateY(0deg) translateZ(0px);
   }
}
@keyframes rotation {
   from {
      opacity: .2;
      -webkit-transform: perspective(1500px) rotateY(180deg) translateZ(700px);
      transform: perspective(1500px) rotateY(180deg) translateZ(700px);
   }
   to {
      opacity: 1;
      -webkit-transform: perspective(1500px) rotateY(0deg) translateZ(0px);
      transform: perspective(1500px) rotateY(0deg) translateZ(0px);
   }
}


      </style> 
 </head> 
 <body translate="no"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
  <div class="social-icons"> 
   <i class="fa fa-google-plus-square fa-5x"></i> 
   <i class="fa fa-twitter-square fa-5x"></i> 
   <i class="fa fa-facebook-square fa-5x"></i> 
   <i class="fa fa-youtube-square fa-5x"></i> 
  </div>  
 </body>
</html>

Related Tutorials