CSS animation : Animation of the transform-origin prot=perty, and rotate transform functions.
by CurleyWebDev
<div class="emoji"> | |
<div class="left-eye"></div> | |
<div class="right-eye"></div> | |
<div class="mouth"></div> | |
<div class="mask"> | |
<div class="front"></div> | |
<div class="straps-top"></div> | |
<div class="straps-bottom"></div> | |
</div> | |
<div class="head"> | |
<div class="face"> | |
<div class="eyes"> | |
<div class="left-eye"></div> | |
<div class="right-eye"></div> | |
</div> | |
<div class="tear-1"></div> | |
<div class="tear-2"></div> | |
<div class="mouth"></div> | |
</div> |
CSS animation : Animation of the transform-origin prot=perty, and rotate transform functions.
by CurleyWebDev
CSS animation of the rotateY transform function and the hue-rotate filter.
by CurleyWebDev
<div class="head"> | |
<div class="left-eye"></div> | |
<div class="right-eye"></div> | |
<div class="mouth"></div> | |
<div class="left-horn"></div> | |
<div class="right-horn"></div> | |
</div> |
<h1>Hover on me for animation!</h1> | |
<div class="head"> | |
<div class="left-eye"></div> | |
<div class="right-eye"></div> | |
<div class="mouth"></div> | |
<div class="z-1 z">Z</div> | |
<div class="z-2 z">Z</div> | |
<div class="z-3 z">Z</div> | |
</div> |
<div class="head"> | |
<div class="left-eye"></div> | |
<div class="right-eye"></div> | |
<div class="tears-right"></div> | |
<div class="tears-left"></div> | |
<div class="mouth"></div> | |
</div> |
<h1>Hover on me for animation!</h1> | |
<div class="head"> | |
<div class="face"> | |
<div class="mouth"></div> | |
<div class="left-eye"></div> | |
<div class="right-eye"></div> | |
<div class="censor"></div> | |
</div> | |
</div> |
This CSS animation uses the "order" property. In order to use this property, you must give the "display" property a value of "flex".