Computer >> Computer tutorials >  >> Programming >> CSS

Fade Out Right Big Animation Effect with CSS

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

Example

<html>
   <head>

      <style>
         .animated {
            background-image: url(/https/www.wsxdn.com/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 fadeOutRightBig {
            0% {
               opacity: 1;
               -webkit-transform: translateX(0);
            }
            100% {
               opacity: 0;
               -webkit-transform: translateX(2000px);
            }
         }
         @keyframes fadeOutRightBig {
            0% {
               opacity: 1;
               transform: translateX(0);
            }
            100% {
               opacity: 0;
               transform: translateX(2000px);
            }
         }

         .fadeOutRightBig {
            -webkit-animation-name: fadeOutRightBig;
            animation-name: fadeOutRightBig;
         }

      </style>
   </head>
   <body>

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

      <script>
         function myFunction() {
            location.reload();
         }
      </script>

   </body>
</html>