Bounce 动画的认识

小鱼儿 2022-10-31 10:53 61阅读 0赞

**Bounce指的是什么？**

弹跳动画效果用于在击中后快速向上，向后或远离表面移动元素。

## 语法 (Syntax) ##

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

示例如下：（效果：运行时图片向上弹跳）

<html>
       <head>
          <style>
             .animated {
                background-image: url(https://avatar.csdnimg.cn/7/1/5/3_weixin_44207333.jpg);
                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>