logo标签列表

如何创建弹跳的div动画

javascriptjquerycssanimation
23

我正在尝试重新创建像http://www.codecomputerlove.com/上的弹跳箭头动画，但是进行得不太顺利...

在尝试使用Layerslider中内置的动画效果时，我最接近的一次尝试可以在此处找到：dev.themarketcreative dot com

我决定放弃使用Layerslider来解决这个问题，有人知道该如何做吗？

我发现的最远的方法是这个：http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149，但我需要在页面加载时并且循环播放这个动画。

谢谢

请展示一些代码。 - Grumpy
7个回答
45

纯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;}
    }
<div class="bounce"></div>

太棒了，总是喜欢使用CSS选项。你真是个明星！ - user3181828
5
这段CSS只能在Webkit浏览器上运行。如果要在Mozilla、Opera和IE 10浏览器上使用，需要添加-moz-、-o-和-ms-前缀。 - Bobby Stenly
1
我应该提到CodePen链接到错误的代码。只需查看下面@RAJ的回答。还应该注意，没有杆的箭头不是真正的箭头。它只是一个角括号。 - Milo LaMar
@MiloLaMar 对不起.. 是的，我错误地删除了那个链接。如果你想，我可以添加一个新的链接。 - Jeyarathnem Jeyachanthuru
在我来这里之前，我通过谷歌找到了一个。下面的内联示例仍然有效，因此不需要添加新的。 - Milo LaMar
你的关键帧非常卡顿，可以尝试使用以下代码：0% { bottom: 0px; } 50% {bottom: 20px;} 100% {bottom: 0px;} - 99 Problems - Syntax ain't one
24

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>

3
很棒的内联演示答案 RAJ :) 我不知道SO实现了这个。 - Milo LaMar
我会在弹跳时发出 boing 声。很好的解决方案！ - Matty
我总是喜欢知道事情为什么会起作用，但仅从实现本身并不明显。找到了一个短的关键帧动画教程视频，它很好地解释了这个问题。 - spb
5
你可以手动逐帧使用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; }
}
<div class="ball"></div>

这里可以看到更详细的演示

这太不可思议了！ - 7abc778
2

You can use pure css to solve it.

.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);
      }
    }
<div class="image"></div>

0
请使用以下代码： 

<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>
0

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

    $(document).ready(function() {



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

doAnimation();

   });
   </script>
工作得很好，但选择了 CSS 选项。非常感谢。 - user3181828
0
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>
1
始终为您的答案提供描述，并解决问题的方法。 - NickCoder
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接