Fade Out Left Big Animation Effect with CSS

CSSWeb DevelopmentFront End Technology

To implement Fade Down Left Big Animation Effect on an image with CSS, you can try to run the following code −

Example

Live Demo

<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 fadeOutLeftBig {
            0% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
            100% {
               opacity: 0;
               -webkit-transform: translateX(-2000px);
            }
         }

         @keyframes fadeOutLeftBig {
            0% {
               opacity: 1;
               transform: translateX(0);
            }
            100% {
               opacity: 0;
               transform: translateX(-2000px);
            }
         }

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

   </head>
   <body>

      <div id="animated-example" class="animated fadeOutLeftBig"></div>
      <button onclick="myFunction()">Reload page</button>

      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>
raja
Published on 27-Apr-2018 12:31:40
Advertisements