CODEWITHSUNDEEP
htmlcssanimation
Simon Mitchell
Simon Mitchell

Reputation: 35

How do I make a Bounce like animation with CSS?

So when the page loads in, I would like my set containers to bounce in. For example, the CSS should be...

.bouncein {
  animation-name: bounceIn;
  animation-duration: 1s;
  animation-delay: 0.5s;`
}

but I need to know the key frames.

So when the page loads, my div's with class bouncein will bounce in.

Upvotes: 2

Views: 6775

Answers (3)

Dima Lutsik
Dima Lutsik

Reputation: 301

check this
also for more css animations
check this https://daneden.github.io/animate.css/

for delay u can use "animation-delay" http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

like:
animation: bounceIn 2s infinite 2s;

@keyframes bounceIn {
	0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
	40% {
    transform: translateY(-30px);
  }
	60% {
    transform: translateY(-15px);
  }
}


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;
  opacity: 0;
}

.bounce {
  animation: bounceIn 2s infinite 2s;
}
<div class="arrow bounce"></div>

Upvotes: 2

Christopher Bobby
Christopher Bobby

Reputation: 55

the answer showed by Arkej works, but I think it's easier and better to use Animate.CSS instead.

Upvotes: -2

Arkej
Arkej

Reputation: 2251

You can do it like that:

.bouncein {
  animation-name: bounceIn;
  animation-duration: 1s;
  animation-delay: 0.5s;
  width: 100px;
  height: 100px;
  background-color: red;
}

@keyframes bounceIn {
0% {
	transform:translateY(-100%);
	opacity: 0;
}
15% {
  transform:translateY(0);
  padding-bottom: 5px;
}
30% {
  transform:translateY(-50%);
}
40% {
  	transform:translateY(0%);
    padding-bottom: 6px;
}
50% {
  transform:translateY(-30%);
}
}
70% {
    transform:translateY(0%);
    padding-bottom: 7px;
}
80% {
  transform:translateY(-15%);
}
90% {
  transform:translateY(0%);
  padding-bottom: 8px;
}
95% {
  transform:translateY(-7%);
}
97% {
  transform:translateY(0%);
  padding-bottom: 9px;
}
99% {
  transform:translateY(-3%);
}
100% {
  transform:translateY(0);
  padding-bottom: 9px;
  opacity: 1;
}
}
<div class="bouncein"></div>

Upvotes: 1

Related Questions