CSS Arrow

by sendil J

HTML

<div id="app">
  <h1>툴팁</h1>

  <div href="#" class="arrow arrow-top animate-top-to-bottom">Message</div>
  <div href="#" class="arrow arrow-bottom animate-bottom-to-top">Message</div>
  <div href="#" class="arrow arrow-right animate-right-to-left">Message</div>
  <div href="#" class="arrow arrow-left animate-left-to-right">Message</div>
  <div href="#" class="arrow arrow-small arrow-top animate-top-to-bottom"></div>
  <div href="#" class="arrow arrow-small arrow-bottom animate-bottom-to-top"></div>
</div>

SCSS

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

.arrow {
  position: relative;
  font-size: 13px;
  max-width: 100px;
  background: #D94F1A;
  height: 40px;
  line-height: 40px;
  margin-bottom: 30px;
  text-align: center;
  color: white;
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.arrow.arrow-small {
  width: 40px;
  height: 30px;
}
.arrow.arrow-small.arrow-top {
  border-radius: 0 0 5px 5px;
}
.arrow.arrow-small.arrow-bottom {
  border-radius: 5px 5px 0 0;
}


.arrow.active {
  visibility: visible;
  opacity: 1;
}

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

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

.arrow.active.animate-bottom-to-top {
  animation-name: move-bottom-to-top;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-iteration-count: infinite;
  animation-direction: alternative;
}

.arrow.active.animate-top-to-bottom {
  animation-name: move-top-to-bottom;
  animation-duration: 1s;
  animation-delay: 0.6s;
  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(15%);
    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(-15%);
    box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
  }
  100% {
    transform:...

JavaScript

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