Same css animation on different element with different transform-origin - HTML CSS CSS Property

HTML CSS examples for CSS Property:transform

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. transform

Description

Same css animation on different element with different transform-origin

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.piece {<!--from   w  w  w .  jav  a2 s.  c om-->
   position: absolute;
   background: url('https://www.java2s.com/style/demo/Google-Chrome.png') top left;
   background-color: rgba(209, 0, 0, 0.42);
   top: 15px;
}
.face2 {
   height: 56px;
   width: 56px;
   background-position: -293px 0px;
   left: 188px;
   animation: eat .5s ease-in-out infinite alternate both .5s;
   -webkit-animation: eat .5s ease-in-out infinite alternate both .5s;
   -webkit-transform-origin: bottom right;
   transform-origin: bottom right;
}
.face1 {
   background-position: -698px -155px;
   width: 53px;
   height: 50px;
   left: 16px;
   animation: eat .5s ease-in-out infinite alternate both;
   -webkit-animation: eat .5s ease-in-out infinite alternate both;
   -webkit-transform-origin: bottom left;
   transform-origin: bottom left;
}
@-webkit-keyframes eat {
   0% {
      -webkit-transform: rotate(-7deg);
   }
   100% {
      -webkit-transform: rotate(4deg);
   }
}
@-moz-keyframes eat {
   0% {
      -webkit-transform: rotate(-7deg);
   }
   100% {
      -webkit-transform: rotate(4deg);
   }
}
@-o-keyframes eat {
   0% {
      -webkit-transform: rotate(-7deg);
   }
   100% {
      -webkit-transform: rotate(4deg);
   }
}
@keyframes eat {
   0% {
      -webkit-transform: rotate(-7deg);
   }
   100% {
      -webkit-transform: rotate(4deg);
   }
}


      </style> 
 </head> 
 <body> 
  <div class="face1 piece"></div> 
  <div class="face2 piece"> 
  </div>  
 </body>
</html>

Related Tutorials