How to create bouncing div animation

后端未结

关注

 7  517

I\'m trying to re-create the bouncing arrow animation like on: http://www.codecomputerlove.com/ but it\'s not going well...

The closest I\'ve got with trying to use the

相关标签:

7条回答

余生分开走

2021-02-01 19:36

You can do it manually, frame-by-frame using CSS or you can probably automate it with SCSS with a bit of math and iteration.

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>

0 讨论(0)

抹茶落季

2021-02-01 19:42

PURE CSS way to do this bounce

Do like this.

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

0 讨论(0)

盖世英雄少女心

2021-02-01 19:43

Use following

<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 讨论(0)

忘掉有多难

2021-02-01 19:45

With the same code you provided, just replace the javascript with this js code.

    $(document).ready(function() {



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

doAnimation();

   });
   </script>

0 讨论(0)

我在风中等你

2021-02-01 19:46

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>

0 讨论(0)

暖寄归人

2021-02-01 19:54

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 讨论(0)

1 2 下一页