如何创建弹跳 div 动画答案

【问题标题】：How to create bouncing div animation如何创建弹跳 div 动画
【发布时间】：2014-06-02 21:23:18
【问题描述】：

我正在尝试重新创建弹跳箭头动画，例如：http://www.codecomputerlove.com/，但进展不顺利...

我在 Layerslider 中尝试使用内置动画的最接近的方法可在此处获得：dev.themarketcreative dot com

我决定用 Layerslider 解决这个问题需要很长时间，有人知道怎么做吗？

我发现的最远的是：http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149，但我需要它在加载和连续循环中执行此动画。

谢谢

【问题讨论】：

请给我们看一些代码

标签： javascript jquery css animation

【解决方案1】：

纯 CSS 方式来实现反弹

这样做。

.bounce {
      position:fixed;
      left:50%;
      bottom:0;
      margin-top:-25px;
      margin-left:-25px;
      height:50px;
      width:50px;
      background:red;
      -webkit-animation:bounce 1s infinite;
    }
    
    @-webkit-keyframes bounce {
      0%       { bottom:5px; }
      25%, 75% { bottom:15px; }
      50%      { bottom:20px; }
      100%     {bottom:0;}
    }

&lt;div class="bounce"&gt;&lt;/div&gt;

【讨论】：

太棒了，总是喜欢使用 CSS 选项。你是明星！
这个 css 只适用于 webkit 浏览器。您需要添加-moz-、-o-、-ms- 使其在mozila、opera 和ie 10 浏览器上运行。..
我应该提到 codepen 链接到损坏的代码。只需看看下面的@RAJ 答案。还应该注意，没有轴的箭头并不是真正的箭头。它只是一个尖括号。
@MiloLaMar 对不起.. 是的，我错误地删除了该链接。如果你愿意，我会宣传一个新的。
我实际上在到达这里之前看到了一个我通过谷歌找到的。下面的内联示例仍然有效，因此无需添加新示例。

【解决方案2】：

body {
  background: black;
}

.arrow {
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left:-20px;
  width: 40px;
  height: 40px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: contain;
  
}

.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px); } }
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0); }
  40% {
    -moz-transform: translateY(-30px); }
  60% {
    -moz-transform: translateY(-15px); } }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px); } }

<body>
<div class="arrow bounce">

</div>
</body>

【讨论】：

很好的内联演示答案 RAJ :) 不知道 SO 实现了这个。
当它弹起时，我一直在发出嗡嗡声。不错的解决方案！

【解决方案3】：

您可以使用CSS 逐帧手动完成，也可以使用SCSS 自动完成，并进行一些数学运算和迭代。

body{ overflow:hidden; } 

.ball{
  --size: 50px;
  --bounceHeight: 120px;
  --duration: .4s;
  width: var(--size);
  height: var(--size);
  margin: auto;
  position: absolute;
  top: 0; 
  left: 0;
  right: 0;
  perspective: 1000px;
}

/* bouncing */
.ball::before{
  content: '';
  display: block;
  width: inherit;
  height: inherit;
  background: radial-gradient(ellipse at 30% 20%, LightSalmon, transparent 40%), 
              radial-gradient(circle at -20% -30%, tomato 60%, darkred);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,.1) inset;
  animation: bounce var(--duration) infinite alternate cubic-bezier(1,0,.8,.9); 
}

/* shadow */
.ball::after{
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0; 
  left: 0;
  right: 0;
  display: block;
  width: inherit;
  height: 20%;
  color: #CCC;
  background-color: currentColor;
  border-radius: 50%;
  transform: translateY(var(--bounceHeight)) scale(.8);
  animation: bounceShadow var(--duration) infinite alternate cubic-bezier(1,0,.8,.9); 
}

@keyframes bounce {
    85%  { transform: translateY(calc(var(--bounceHeight) - 3px)); }
    86%  { transform: translateY(calc(var(--bounceHeight) - 3px)) scale(1.1, .9); }
    100%  { transform: translateY(var(--bounceHeight)) scale(1.4, .5); }
}

@keyframes bounceShadow {
    0%  { box-shadow: 0 0 10px 8px currentColor; color:#EEE; }
    90%  { box-shadow: 0 0 3px 3px currentColor; }
    91%  { box-shadow: 0 0 2px 2px currentColor; }
    100%  { box-shadow: 0 0 0px currentColor; }
}

&lt;div class="ball"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

可以用纯css来解决。

.image {
      margin-top: 50px;
      width: 50px;
      height: 50px;
      background-color: gold;
      border: 1px solid #999;
      animation: bounce 5s infinite alternate;
      -webkit-animation: bounce 5s infinite alternate;
    }
    @keyframes bounce {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-55px);
      }
    }
    @-webkit-keyframes image {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-55px);
      }
    }

&lt;div class="image"&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

使用以下

<html lang="en">
<head>
 <style>
      p {
           background-color:#bca;
           width:200px; 
           border:1px solid green; 
        }
     div{ width:100px; 
            height:100px; 
            background:red;  
        }
  </style>

<script src="http://www.tutorialspoint.com/jquery/jquery-1.3.2.min.js"></script> 
<script src="http://www.tutorialspoint.com/jquery/jquery-ui-1.7.2.custom.min.js"></script>

<title>Birman Cats</title>
</head>

<body>

   <p>Click the button</p>
   <button id="button"> Bounce </button>

   <div class="target">
   </div>

<script>

   $(document).ready(function() {


         $(".target").effect( "bounce", 
          {times:3}, 300 );

         function bouncee(){

                $(".target").effect( "bounce",{times:3}, 300 );
   setTimeout(bouncee(),1000);
             }

     setTimeout(bouncee(),1000);


   });

</script>
</body>
</html>

【讨论】：

【解决方案6】：

使用您提供的相同代码，只需将此 js 代码替换为 javascript。

    $(document).ready(function() {



      function doAnimation()
{
         $(".target").effect( "bounce", {times:3}, 300, doAnimation);
}

doAnimation();

   });
   </script>

【讨论】：

效果很好，但选择了 CSS 选项。非常感谢。

【解决方案7】：

no
.trnas{
      margin-top: 50px;
      width: 50px;
      height: 50px;
      background-color: gold;
      border: 1px solid #999;
      animation: bounce 5s infinite alternate;
      -webkit-animation: bounce 5s infinite alternate;
    }
    @keyframes bounce {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-55px);
      }
    }
    @-webkit-keyframes image {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-55px);
      }
    }
<div class="trnas"></div>

【讨论】：

始终为您的答案提供描述以及它将如何解决问题。