Animation Arrow

Animation Down Arrow

코드

<div class="downArrow bounce">
  <img
   width="30"
   height="20"
   src="https://cdn.pixabay.com/photo/2013/07/12/12/29/arrow-145767_960_720.png" />
</div>

.downArrow {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: bounce 1s infinite;
  -webkit-animation: bounce 1s infinite;
  -moz-animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  
  40% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

Codepen

codepen-animation-down-arrow