如何使用CSS制作像Bounce一样的Bounce？

Question

因此，当页面加载时，我希望我的set容器能够反弹。例如，CSS应该是......

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

但我需要知道关键帧。

因此，当页面加载时，我的div与类弹跳将会反弹。

Answer 1

你可以这样做：

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

Answer 2

检查这个 也适用于更多css动画
检查此https://daneden.github.io/animate.css/

延迟你可以使用＆＃34;动画延迟＆＃34; http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

喜欢：
动画：弹跳2s无限2s;

＆＃13;

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

Arkej的答案显示，但我认为使用Animate.CSS更容易也更好。