Fade Out Up Animation Effect with CSS

CSSWeb DevelopmentFront End Technology

To implement Fade Out Up 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 fadeOutUp {
            0% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
            100% {
               opacity: 0;
               -webkit-transform: translateY(-20px);
            }
         }

         @keyframes fadeOutUp {
            0% {
               opacity: 1;
               transform: translateY(0);
            }
            100% {
               opacity: 0;
               transform: translateY(-20px);
            }
         }

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

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

      <script>
         function myFunction() {
           location.reload();
         }
      </script>
   </body>
</html>
raja
Published on 30-Apr-2018 07:18:54
Advertisements