Rotate Out Down Left Animation Effect with CSS

CSS Web Development Front End Technology

To create rotate out down left animation effect with CSS, you can try to run the following code −

Example

<html>
   <head>
      <style>
         .animated {
            background-image: url(/css/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }
         @-webkit-keyframes rotateOutDownLeft {
            0% {
               -webkit-transform-origin: left bottom;
               -webkit-transform: rotate(0);
               opacity: 1;
            }
            100% {
               -webkit-transform-origin: left bottom;
               -webkit-transform: rotate(90deg);
               opacity: 0;
            }
         }

         @keyframes rotateOutDownLeft {
            0% {
               transform-origin: left bottom;
               transform: rotate(0);
               opacity: 1;
            }
            100% {
               transform-origin: left bottom;
               transform: rotate(90deg);
               opacity: 0;
            }
         }
         .rotateOutDownLeft {
            -webkit-animation-name: rotateOutDownLeft;
            animation-name: rotateOutDownLeft;
         }
      </style>
   </head>

   <body>
      <div id = "animated-example" class = "animated rotateOutDownLeft"></div>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</head>

Nitya Raut

Published on 30-Apr-2018 11:09:41

Previous Page Print Page