Fade Out Left Big Animation Effect with CSS

CSS Web Development Front End Technology

To implement Fade Down Left Big Animation Effect on an image 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 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>

Karthikeya Boyini

Published on 27-Apr-2018 12:31:40

Previous Page Print Page