animate.css源码分析--bounce(弹跳效果)

最新推荐文章于 2025-07-01 13:50:17 发布
原创 最新推荐文章于 2025-07-01 13:50:17 发布 · 1.1w 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #css #前端

本文深入分析了animate.css中bounce动画的实现原理，包括关键的CSS属性如`animation-duration`、`animation-fill-mode`和`transform-origin`等，并通过时间轴梳理了动画过程。文章还探讨了使用ease-out和ease-in替换贝塞尔曲线来实现4次弹跳的可能性，并设计了一个新的弹跳动画方案。最后提供了animate.css的下载链接。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

     animate.css是一个不错CSS3预设动画库,是很好的CSS3动画学习资源,下面来剖析下bounce效果的实现原理,在此基础上实现自己的CSS动画。

     先从animate.css把bounce效果单独移出来，暂不考虑针对不同的浏览器的支持,测试浏览器为chrome,看一下效果。

<!DOCTYPE html>
<html>
<head>
    <title>bounce-source</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, minimal-ui" />
    <style type="text/css">
        html {
            font: 100%/1.5 "Roboto", Verdana, sans-serif;
            color: #3d464d;
            background-color: #fff;
            -webkit-font-smoothing: antialiased;
            width: 100%;
            overflow: hidden-x;
            text-align: center;
        }
        .font-style{
            color: #f35626;
            background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-animation: hue 10s infinite linear;
        }
        h1{
            margin-bottom: 1.5rem;
            font-size: 6rem;
            font-weight: 100;
            line-height: 1;
            letter-spacing: -.05em;
        }
        @-webkit-keyframes hue {
          from {
            -webkit-filter: hue-rotate(0deg);
          }

          to {
            -webkit-filter: hue-rotate(-360deg);
          }
        }
    </style>
    <style type="text/css">
        .animated {
          animation-duration: 1s;
          animation-fill-mode: both;
        }

        .animated.infinite {
          animation-iteration-count: infinite;
        }
        .bounce {
          animation-name: bounce;
          transform-origin: center bottom;
        }

        @keyframes bounce {
          from, 20%, 53%, 80%, to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transform: translate3d(0,0,0);
          }

          40%, 43% {
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transform: translate3d(0, -30px, 0);
          }

          70% {
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transform: translate3d(0, -15px, 0);
          }

          90% {
            transform: translate3d(0,-4px,0);
          }
        }
    </style>
</head>
<body>
    <header>
      <div>
       <span style="display: block;" class="bounce animated infinite"><h1 class="font-style">bounce</h1></span>
      </div>
    </header>
</body>
</html>

看下一些公共的属性

  1. animation-duration: 1s 指定动画延迟1S执行,整个动画过程为1S,可以根据实际情况调整；
  2. animation-fill-mode: both 指定动画填充模式为前后填充,bounce的动画等待和动画结束状态分别保持keyframes的第一帧和最后一帧状态；
  3. transform-origin: center bottom 指定动画执行的基点为中间下方,动画对象的弹跳基点,大概理解为重心在对象的中下位置；
  4. animation-iteration-count: infinite 指定动画执行次数,可以根据实际情况调整。

基本属性定义完成后，看下动画执行的具体过程

        @keyframes bounce {
          from, 20%, 53%, 80%, to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transform: translate3d(0,0,0);
          }

          40%, 43% {
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transform: translate3d(0, -30px, 0);
          }

          70% {
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transform: translate3d(0, -15px, 0);
          }

          90% {
            transform: translate3d(0,-4px,0);
          }
        }

看起来不够直观，先按时间轴整理下

        @keyframes bounce {
          0%, 20%{
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transform: translate3d(0,0,0);
          }

          40%, 43% {
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transform: translate3d(0, -30px, 0);
          }

          53%{
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transform: translate3d(0,0,0);
          }

          70% {
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transform: translate3d(0, -15px, 0);
          }

          80%{
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transform: translate3d(0,0,0);
          }

          90% {
            transform: translate3d(0,-4px,0);
          }

          100% {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transform: translate3d(0,0,0);
          }

        }

这样看起来清晰多了,大体的过程可以用下图表示
bounce过程图

  • 0%- 53% 完成了第一次弹跳，高度为30px
  • 53%-80% 完成了第二次弹跳，高度为15px
  • 80%-100% 完成了第三次弹跳，高度为4px
  • 弹跳时间比例大概为5:3:2，高度比例大概为8:4:1
  • 弹跳上升阶段速度先快后慢，下降阶段速度先慢后快

上升
                  上升阶段速度贝塞尔曲线

下降
                  下降阶段速度贝塞尔曲线

关于 贝塞尔曲线可以看下另一篇CSS3 三次贝塞尔曲线(cubic-bezier)

思考

    能否用ease-out与ease-in分别代替上升与下降的过程,完成4次弹跳过程。

设计

  • 弹跳时间比例大概为9:5:3:2,高度比例大概为14:8:4:1,动画持续时间为1.5S
  • 0%- 47% 完成第一次弹跳,高度为42px
  • 47%-73% 完成第二次弹跳,高度为24px
  • 73%-89% 完成第三次弹跳,高度为12px
  • 89%-100% 完成第四次弹跳,高度为3px
        @keyframes bounce {
          0%, 15%, 47%, 73%,89%,100% {
            animation-timing-function: ease-out;
            transform: translate3d(0,0,0);
          }

          30%, 32% {
            animation-timing-function: ease-in;
            transform: translate3d(0, -42px, 0);
          }

          60% {
            animation-timing-function: ease-in;
            transform: translate3d(0, -24px, 0);
          }

          82% {
            animation-timing-function: ease-in;
            transform: translate3d(0, -12px, 0);
          }

          94% {
            animation-timing-function: ease-in;
            transform: translate3d(0,-3px,0);
          }
        }
<!DOCTYPE html>
<html>
<head>
    <title>bounce-demo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, minimal-ui" />
    <style type="text/css">
        html {
            font: 100%/1.5 "Roboto", Verdana, sans-serif;
            color: #3d464d;
            background-color: #fff;
            -webkit-font-smoothing: antialiased;
            width: 100%;
            overflow: hidden-x;
            text-align: center;
        }
        .font-style{
            color: #f35626;
            background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-animation: hue 10s infinite linear;
        }
        h1{
            margin-bottom: 1.5rem;
            font-size: 6rem;
            font-weight: 100;
            line-height: 1;
            letter-spacing: -.05em;
        }
        @-webkit-keyframes hue {
          from {
            -webkit-filter: hue-rotate(0deg);
          }

          to {
            -webkit-filter: hue-rotate(-360deg);
          }
        }
    </style>
    <style type="text/css">
        .animated {
          animation-duration: 1.5s;
          animation-fill-mode: both;
        }

        .animated.infinite {
          animation-iteration-count: infinite;
        }
        .bounce {
          animation-name: bounce;
          transform-origin: center bottom;
        }

        @keyframes bounce {
          0%, 15%, 47%, 73%,89%,100% {
            animation-timing-function: ease-out;
            transform: translate3d(0,0,0);
          }

          30%, 32% {
            animation-timing-function: ease-in;
            transform: translate3d(0, -42px, 0);
          }

          60% {
            animation-timing-function: ease-in;
            transform: translate3d(0, -24px, 0);
          }

          82% {
            animation-timing-function: ease-in;
            transform: translate3d(0, -12px, 0);
          }

          94% {
            animation-timing-function: ease-in;
            transform: translate3d(0,-3px,0);
          }
        }
    </style>
</head>
<body>
    <header>
      <div>
       <span style="display: block;" class="bounce animated infinite"><h1 class="font-style">bounce</h1></span>
      </div>
    </header>
</body>
</html>

附：animate.css动画库下载地址：https://daneden.github.io/animate.css/

实现bounce效果的弹出效果
04-04
该源码实现了一个实现bounce效果的弹出效果，LTBounceSheet是具有bounce效果的action sheet，大家可以多多了解一下吧。
bounce css,Bounce
weixin_39668408的博客
08-04 270
Bounce描述 (Description)弹跳动画效果用于在击中后快速向上，向后或远离表面移动元素。语法 (Syntax)@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-30px);}60% {transform: translateY(-15px)...
在UniApp中防止页面上下拖动的方法
最新发布
Hi，我是 pengles，一名专注于全栈开发的工程师。
07-01 688
在UniApp开发中，设备上默认会有页面上下拖动的弹性效果（bounce效果），这在某些场景下可能不是我们想要的。
animate.css动画抖动,animate.css动画
weixin_36071439的博客
08-04 418
兼容ie8 rgba&lpar;&rpar;用法 滤镜filter的用法原文 http://blog.csdn.net/westernranger/article/details/40836861 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不 ...深入理解CSS3 animation的steps在应用 CSS3 渐变/动画时,有个控制时间的属性 ....
css实现bounce动画
weixin_44207333的博客
08-25 1676
html: <img className="bounce" src="https://avatar.csdnimg.cn/7/1/5/3_weixin_44207333.jpg" alt=""/> css: .bounce { animation: bounce 2.5s infinite 0.5s both; transform-origin: center bottom; } @keyframes bounce { 0%, 7%, 25%, 36%, 45%,
bounce css,Bounce.js 优秀的的 CSS3 动画关键帧插件 - 文章教程
weixin_29522547的博客
08-04 254
Bounce.js是一款功能非常强大的可视化 CSS3 动画代码生成插件。该插件提供了一个在线 APP，通过该 APP 可以在可视化的条件下编辑 CSS3 的各种动画效果，如移动、旋转、倾斜、easing 等效果，编辑完成后可以直接获取该 CSS3 帧动画的代码，复制代码带你的页面中即可在你的页面上获得与该动画一样的效果。此外，你也可以单独使用 Bounce.js，通过js代码来完成各种 CSS3...
animation上下弹跳动画
qq_40796623的博客
07-12 370
animation上下弹跳
bounce css_Bounce.JS：快速创建复杂CSS动画
07-18 214
bounce css 照片：icopythat 自1995年以来，Javascript（一种为实现“ 使网页更具动态性 ”的卑微任务而设计的简单脚本语言）已经走了很长一段路。 由Mozilla联合创始人Brendan Eich发明，在过去五年的大部分时间里，它一直稳步取代Adobe的Flash，成为动画，游戏和应用程序的Web首选工具。 随着JavaScript的兴起，涌现了许多...
简单的动画效果：BOUNCE程序代码分析
ensiry的专栏
05-03 821
/*--------------------------------------------------- BOUNCE.C -- Bouncing Ball Program ---------------------------------------------------*/ #include #define ID_TIMER 1 LRESULT CALLBACK WndPro
Bounce 动画的认识
qq_37916164的博客
02-22 559
Bounce指的是什么？ 弹跳动画效果用于在击中后快速向上，向后或远离表面移动元素。 语法 (Syntax) @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} } 示例如下：（效果：运行时图片向上弹跳） <html> .
推荐开源项目：赋予滚动视图生动弹跳效果的Bounce库
gitblog_00075的博客
06-20 494
推荐开源项目：赋予滚动视图生动弹跳效果的Bounce库 在Android开发中，为用户提供流畅且有吸引力的交互体验是至关重要的。今天，我要向大家推荐一个非常棒的开源项目——Bounce，它能让你的ListView, ScrollView和RecyclerView在过度滚动时展现出iOS风格的弹性回弹效果，并支持自定义动画。 项目介绍 Bounce是一个简洁而强大的TouchListener实现，能...
性能强悍的CSS动画库--Animate.css
xiaolong446的博客
12-23 739
互联网圈子里有造“轮子”的说法，能用现成的就不要自己去捣鼓了，既省时又省力！今天介绍的就是一款性能强悍的CSS动画库（）的使用指导。1.基本功能< h1 class = "animate__animated animate__bounce animate__delay-2s animate__repeat-2" > 延时2s后，重复跳动 2 次动画效其中，为跳动效果；：延时x秒后使用动画，项目提供了4种延时模式从2s到5s,默认情况是延时1s，我们也可以修改默认值。
css动画
qq_40052011的博客
10-17 185
CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动画（animation）</title&gt...
animate.css动画样式详解
weixin_38797742的博客
01-22 545
一、使用步骤 从左边进入 #### 二、属性 1、Attention Seekers bounce flash pulse rubber Band shake swing tada wobble 2、Bouncing Entrances bounceInLeft bounceOutLeft bounceInRight bounceOutRight bounceInDown bounceOutDown bounceInUp bounceOutUp 3、Bouncing Exits bounceOut bo
React-Native中Animate动画使用方法汇总整理（三）之动画配置方法的总结（timing、spring、decay）
weixin_42405831的博客
09-23 801
React-Native中Animate动画使用方法汇总整理（三）之动画配置方法的总结（timing、spring、decay） 本篇是RN动画组件使用方式整理的第三篇，前面主要是对动画执行的基本条件进行了整理，这篇主要整理动画配置里可供使用的三种方法，分别是：timing、spring、decay，先看效果 可以看到，不同的动画配置方法会导致动画产生不同的效果 完整代码如下 //App.js 'use strict'; import React from 'react'; import Animate
Animate动画
前后端分离，人不分离！
09-28 3962
一个有趣的，跨浏览器的 css3 动画库。
Animate.css的使用
飞猪
08-25 1620
Animate.css的使用 1. 官网 https://animate.style/ 2. 常见的几种引入方式，官网都给出了 3. 如何使用 animate.css的使用很简单，它是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类 animate__animated 和相应的类添加到元素上就行了，找到你想要的动画，类名在官网上直接粘贴过来，效果就有了： 4. 小demo: <!DOCTYPE html> <html lang="en"> <head
控制animate.css动画执行效果
weixin_44576964的博客
01-23 683
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 要控制animate.css动画执行的时间可以直接在样式中添加： animation-duration: 3000ms; /
【animate.css】animate.css 的用法，轻松给页面加上动画
Owen的博客
10-22 1117
git地址：https://github.com/animate-css/animate.css 文档：https://animate.style/ 应用： 一、第一种方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal.
animate.css动画库：60+CSS3动画效果全面解析
"animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值