CSS - Rotate Out Up Left Effect

Quiz

Description

It provides to move or cause to move in a circle round an axis or centre.

Syntax

@keyframes rotateOutUpLeft {
   0% {
      transform-origin: left bottom; 
      transform: rotate(0); 
      opacity: 1; 
   }
   100% { 
      -transform-origin: left bottom; 
      -transform: rotate(-90deg); 
      opacity: 0; 
   } 
}

Parameters

Transform − Transform applies to 2d and 3d transformation to an element.
Opacity − Opacity applies to an element to make translucence.

Example

<html>

<head>

   <style>
      .roulAnimated {
         background-image: url(/https/www.tutorialspoint.com/html/images/test.png);
         background-repeat: no-repeat;
         background-position: left bottom;
         padding-top: 95px;
         margin-bottom: 60px;
         margin-top: 60px;
         -webkit-animation-duration: 3s;
         animation-duration: 3s;
         -webkit-animation-fill-mode: both;
         animation-fill-mode: both;
      }

      @-webkit-keyframes rotateOutUpLeft {
         0% {
            -webkit-transform-origin: left bottom;
            -webkit-transform: rotate(0);
            opacity: 1;
         }

         100% {
            -webkit-transform-origin: left bottom;
            -webkit-transform: rotate(-20deg);
            opacity: 0;
         }
      }

      @keyframes rotateOutUpLeft {
         0% {
            transform-origin: left bottom;
            transform: rotate(0);
            opacity: 1;
         }

         100% {
            transform-origin: left bottom;
            transform: rotate(-20deg);
            opacity: 0;
         }
      }

      .rotateOutUpLeft {
         -webkit-animation-name: rotateOutUpLeft;
         animation-name: rotateOutUpLeft;
      }
   </style>
</head>

<body>
   <div id="roulAnimates" class="roulAnimated"></div>
   <button onclick="roulFun()">Click</button>

   <script>
      function roulFun() {
         document.getElementById("roulAnimates").classList.add('rotateOutUpLeft');
      }
   </script>
</body>

</html>

Output

It will produce the following result:

css_animation.htm

Print Page