Home > Article > Web Front-end > CSS bounce animation effect

CSS bounce animation effect

王林forward: 2023-08-30 22:21:06647browse

CSS 的弹跳动画效果

The bounce animation effect is used to cause an element to quickly move upward, backward, or away from a surface after being hit.

Example

You can try running the following code to achieve the bouncing animation effect -

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: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }

         @-webkit-keyframes bounce {
            0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
            40% {-webkit-transform: translateY(-30px);}
            60% {-webkit-transform: translateY(-15px);}
         }

         @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-30px);}
            60% {transform: translateY(-15px);}
         }

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

   </head>
   <body>

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

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

The above is the detailed content of CSS bounce animation effect. For more information, please follow other related articles on the PHP Chinese website!

css

Statement：

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

Previous article：Create white text with black shadow using CSSNext article：Create white text with black shadow using CSS

See more

CSS bounce animation effect

Example

Related articles