Popup Animation

by Chinju Mc

HTML

<div class="container container-open">
  <span class="elem-open-1 elem-common">N</span>
  <span class="elem-open-2 elem-common">E</span>
  <span class="elem-open-3 elem-common">W</span>
</div>

CSS

@keyframes idle-anim {
  0% {
    bottom: 0;
    color: red;
  }

  50% {
    bottom: 0px;
    color: red;
  }
  
  100% {
    bottom: 3px;
    color: orange;
  }
}

@keyframes open-container-anim {
  0% { 
    transform: scale(0) rotate(-90deg);
  }
  60% {
    transform: scale(0) rotate(-90deg);
  }
  100% { 
    transform: scale(1) rotate(0deg);
  }
}

@keyframes open-elem-anim {
  0% { 
    bottom: 0;
    color: red;
    transform: scale(1);
  }
  60% {
    bottom: 5px;
    color: yellow;
    transform: scale(1.2);
  }
  100% { 
    bottom: 0;
    color: red;
    transform: scale(1);
  }
}

.container {
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 24px;
}

.elem-common {
  font-weight: bold;
  color: #ff3000;
  position: relative;
}

.container-open {
  animation: open-container-anim 600ms alternate;
}

.elem-open-1 {
  animation: 
    open-elem-anim 600ms alternate 400ms forwards,
    idle-anim 600ms infinite 1200ms alternate;
}

.elem-open-2 {
  animation: 
    open-elem-anim 600ms alternate 500ms forwards,
    idle-anim 600ms infinite 1400ms alternate;
}

.elem-open-3 {
 animation: 
    open-elem-anim 600ms alternate 600ms forwards,
    idle-anim 600ms infinite 1600ms alternate;
}