Teach with us

Bounce Out Up Animation Effect with CSS

CSSWeb DevelopmentFront End Technology

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

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

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

   </head>
   <body>

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

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

   </body>
</html>
raja
Samual Sam
Updated on 16-Mar-2020 08:06:26

Previous Page Print Page Next Page  
Advertisements