Home > Article > Web Front-end > Use CSS to achieve bouncing animation effects

Use CSS to achieve bouncing animation effects

WBOYforward: 2023-08-26 16:37:10985browse

使用 CSS 实现弹跳动画效果

To use CSS to achieve the Bounce Out animation effect, you can try running the following code-

Example

Live Demonstration

<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 bounceOut {
            0% {
               -webkit-transform: scale(1);
            }
            25% {
               -webkit-transform: scale(.95);
            }
            50% {
               opacity: 1;
               -webkit-transform: scale(1.1);
            }
            100% {
               opacity: 0;
               -webkit-transform: scale(.3);
            }
         }
         @keyframes bounceOut {
            0% {
               transform: scale(1);
            }
            25% {
               transform: scale(.95);
            }
            50% {
               opacity: 1;
               transform: scale(1.1);
            }
            100% {
               opacity: 0;
               transform: scale(.3);
            }
         }
         .bounceOut {
            -webkit-animation-name: bounceOut;
            animation-name: bounceOut;
         }

      </style>
   </head>

   <body>
      <div id="animated-example" class="animated bounceOut"></div>
      <button onclick="myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

The above is the detailed content of Use CSS to achieve bouncing animation effects. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to change the position of the scroll bar using CSS?Next article：How to change the position of the scroll bar using CSS?

See more

Use CSS to achieve bouncing animation effects

Example

Related articles