CSS Arrow

by humanzing

HTML

<div id="app">
  <div href="#" class="arrow arrow-right animate-right-to-left"></div>
  <div href="#" class="arrow arrow-left animate-left-to-right"></div>
</div>

SCSS

#app {
  margin: auto;
  width: 50%;
  cursor:pointer;
}

.arrow {
  width:20px;
  position: relative;
  background: rgb(66, 135, 245);
  height: 40px;
  line-height: 40px;
  margin-bottom: 30px;
  text-align: center;
  color: white;
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
  opacity: 1;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.arrow.arrow-small.arrow-top {
  border-radius: 0 0 5px 5px;
}
.arrow.arrow-small.arrow-bottom {
  border-radius: 5px 5px 0 0;
}



.arrow.active.animate-left-to-right:hover {
  animation-name: move-left-to-right;
  animation-duration: 1s;
  animation-delay: 0.0s;
  animation-iteration-count: infinite;
  animation-direction: alternative;
}

.arrow.active.animate-right-to-left:hover{
    animation-name: move-right-to-left;
  animation-duration: 1s;
  animation-delay: 0.0s;
  animation-iteration-count: infinite;
  animation-direction: alternative;
}
@keyframes move-left-to-right {
  0% {
    transform: translateX(5%);
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: translateX(25%);
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
  }
  100% {
    transform: translateX(5%);
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
  }
}

@keyframes move-right-to-left {
  0% {
    transform: translateX(-5%);
    box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: translateX(-25%);
    box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
  }
  100% {
    transform: translateX(-5%);
    box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
  }
}

@keyframes move-bottom-to-top {
  0% {
    transform: translateY(-5%);
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
  }
  50% {
    transform: translateY(-15%);
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: translateY(-5%);
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
  }
}

@keyframes move-top-to-bottom {
  0% {
    transform: translateY(5%);
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
  }
  50% {
    transform:...

JavaScript

$('.arrow').addClass('active')