Arrow - Bouncing Arrow

by davidxmartins

HTML

<div class="arrow-down__container bounce-2">
<i class="arrow-down turn-down "></i>
</div>

CSS

@keyframes bounce-2 {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-30px); }
        100% { transform: translateY(0); }
    }

.arrow-down__container {
  position: absolute;
  top: 90vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  animation: bounce-2 2s infinite ease-in-out;
}
.arrow-down {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 10px;
}
.turn-down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}