Rotate Out Up Right Animation Effect with CSS

CSS Web Development Front End Technology

To create rotate out up right 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 rotateOutUpRight {
            0% {
               -webkit-transform-origin: right bottom;
               -webkit-transform: rotate(0);
               opacity: 1;
            }
            100% {
               -webkit-transform-origin: right bottom;
               -webkit-transform: rotate(90deg);
               opacity: 0;
            }
         }
         @keyframes rotateOutUpRight {
            0% {
               transform-origin: right bottom;
               transform: rotate(0);
               opacity: 1;
            }
            100% {
               transform-origin: right bottom;
               transform: rotate(90deg);
               opacity: 0;
            }
         }
         .rotateOutUpRight {
            -webkit-animation-name: rotateOutUpRight;
            animation-name: rotateOutUpRight;
         }
      </style>
   </head>
   <body>
      <div id = "animated-example" class = "animated rotateOutUpRight"></div>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

Usharani

Published on 02-May-2018 08:29:33

Previous Page Print Page