/* animations */
#app-container div {
  animation-duration: 600ms;
  animation-name: slide-in;
}

#display-content-current-image:hover {
  animation: 2s infinite grow-shrink;
}

/* slide-in, grow-shrink animation from 
   found from: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations
*/
@keyframes slide-in {
  from {
    translate: 100vw 0;
    scale: 200% 1;
  }

  to {
    translate: 0 0;
    scale: 100% 1;
  }
}

@keyframes grow-shrink {
  25%,
  75% {
    scale: 100%;
  }

  50% {
    scale: 200%;
  }
}