Bounce 动画的认识

小鱼儿 2022-10-31 10:53 77阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，77人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bounce 动画的认识

Bounce指的是什么？弹跳动画效果用于在击中后快速向上，向后或远离表面移动元素。语法 (Syntax) @keyframes bounce {

小鱼儿/ 2022年10月31日 10:53/ 0 赞/ 78 阅读

相关 redux的认识

// 首先定义一个改变数据的plain函数，成为reducer function count (state, action) \{ var defaultSta

桃扇骨/ 2022年09月29日 04:20/ 0 赞/ 162 阅读

相关 Sweet Snippet 之 Bounce Setting

1. 题记又是一篇Sweet Snippet，自己看来都觉得过小，不足以成篇，不过自觉有些趣味，也就随便记一记了，权当自娱自乐：） 2. 问题程序中有时

淩亂°似流年/ 2022年09月20日 11:20/ 0 赞/ 11 阅读

相关 Unity3D之Mecanim动画系统学习笔记（一）：认识Mecanim动画系统

Mecanim简介 Mecanim动画系统是Unity3D4.0开始引入的一套全新的动画系统，主要提供了下面4个方面的功能： 1. 针对人形角色提供一套特殊的工作流。

谁践踏了优雅/ 2022年05月28日 11:52/ 0 赞/ 255 阅读

相关指针的认识

include <stdio.h> int main() { int a[3][4]={1,2,3,4,5,6,7,8,9,10,1

系统管理员/ 2022年02月24日 19:40/ 0 赞/ 166 阅读

相关 div 的认识

把div看成是布局元素这种观点我想是最多的，类似有“用div代替table进行布局”、“实战CSS+DIV布局”等等等等，太多了，还有不少人延用Dreamweave

爱被打了一巴掌/ 2022年01月09日 05:05/ 0 赞/ 238 阅读

相关 proxy 的认识

　　Proxy 用于修改某些操作的默认行为，也可以了解成是在目标对象之前假设的一层拦截，或者是对原生 Object 方法的封装；通过 Proxy 的设置，外部所有的访问都必须先

桃扇骨/ 2021年10月20日 00:48/ 0 赞/ 287 阅读

相关 name的认识

认识主模块在python函数中，如果一个函数调用其他函数完成一项功能我们称这个函数为主函数。如果一个函数没有调用其他函数，我们这种函数叫做非主函数。模块也是一样的，如果一个

待我称王封你为后i/ 2021年09月13日 21:18/ 0 赞/ 280 阅读

相关 C - Bouncing Ball

C - Bouncing Ball C. Bouncing Ball time limit per test 1 second memory l

小灰灰/ 2021年07月16日 23:28/ 0 赞/ 258 阅读

相关 CSS3动画animation认识和Animate.css的使用

CSS动画可以取代`js`动画在移动端会更加流畅！下面是一个的绘制太阳系各大行星运行轨迹笔记，可以自学参考！ -------------------- 首先我们需要创

爱被打了一巴掌/ 2021年07月04日 22:37/ 0 赞/ 742 阅读