Fade Out Left Animation Effect with CSS

CSS Web Development Front End Technology

To implement Fade Out Left 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 fadeOutLeft {
            0% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
            100% {
               opacity: 0;
               -webkit-transform: translateX(-20px);
            }
         }
         @keyframes fadeOutLeft {
            0% {
               opacity: 1;
               transform: translateX(0);
            }
            100% {
               opacity: 0;
               transform: translateX(-20px);
            }
         }
         .fadeOutLeft {
            -webkit-animation-name: fadeOutLeft;
            animation-name: fadeOutLeft;
         }
      </style>
   </head>
   <body>
      <div id="animated-example" class="animated fadeOutLeft"></div>
      <button onclick="myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>