[CSS] Bounce 효과 적용

HTML

 <div className="bounce">chick me!</div>

 

CSS

.bounce { 
  text-align: center;
  font-weight: bold;
  animation-fill-mode: forwards;
  position: relative;
  animation-name: bounce;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    top: 0;
  }
  50% {
    top: -20px;
  }
  100% {
    top: 0;
  }
}