Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create bouncing div animation

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 built in animations in Layerslider is available here: dev.themarketcreative dot com

I've decided that trying to figure this out with Layerslider is taking to long, does anyone know how to do this?

The furthest I discovered is this: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149 but I need it do do this animation onload and on a continuous loop.

Thanks

like image 242
user3181828 Avatar asked Apr 18 '14 11:04

user3181828


People also ask

How do you add a bounce animation?

Go to the app -> res right click on res folder then New -> Android Resource Directory and create an anim Directory. Then right-click on anim folder then go to New -> Animation Resource File and create a bounce.

What is bounce animation?

Bounce Animation effect is used to move the element quick up, back, or away from a surface after hitting it.


3 Answers

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>
like image 120
Jeyarathnem Jeyachanthuru Avatar answered Oct 10 '22 12:10

Jeyarathnem Jeyachanthuru


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>
like image 34
RAJ Avatar answered Oct 10 '22 13:10

RAJ


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>

💡 A much more elaborate demo can be seen here

like image 30
vsync Avatar answered Oct 10 '22 13:10

vsync