/* Base class */
.scrollina-anim {
  opacity: 1;
  will-change: transform, opacity;
}

/* Fade In */
.scrollina-anim.fade-in {
  animation-name: scrollina-fade-in;
}
@keyframes scrollina-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slides */
.scrollina-anim.slide-up    { animation-name: scrollina-slide-up; }
.scrollina-anim.slide-down  { animation-name: scrollina-slide-down; }
.scrollina-anim.slide-left  { animation-name: scrollina-slide-left; }
.scrollina-anim.slide-right { animation-name: scrollina-slide-right; }

@keyframes scrollina-slide-up   { from { transform: translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes scrollina-slide-down { from { transform: translateY(-30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes scrollina-slide-left { from { transform: translateX(30px); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes scrollina-slide-right{ from { transform: translateX(-30px); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* Zoom */
.scrollina-anim.zoom-in  { animation-name: scrollina-zoom-in; }
.scrollina-anim.zoom-out { animation-name: scrollina-zoom-out; }

@keyframes scrollina-zoom-in  { from { transform:scale(0.8); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes scrollina-zoom-out { from { transform:scale(1.2); opacity:0; } to { transform:scale(1); opacity:1; } }

/* Flip */
.scrollina-anim.flip-in-x { animation-name: scrollina-flip-in-x; backface-visibility: hidden; }
.scrollina-anim.flip-in-y { animation-name: scrollina-flip-in-y; backface-visibility: hidden; }

@keyframes scrollina-flip-in-x {
  from { transform: rotateX(90deg); opacity: 0; }
  to   { transform: rotateX(0deg); opacity: 1; }
}
@keyframes scrollina-flip-in-y {
  from { transform: rotateY(90deg); opacity: 0; }
  to   { transform: rotateY(0deg); opacity: 1; }
}

/* Rotate */
.scrollina-anim.rotate-in { animation-name: scrollina-rotate-in; }
@keyframes scrollina-rotate-in {
  from { transform: rotate(-200deg); opacity: 0; }
  to   { transform: rotate(0deg); opacity: 1; }
}

/* Bounce */
.scrollina-anim.bounce-in { animation-name: scrollina-bounce-in; }
@keyframes scrollina-bounce-in {
  0% { transform: scale(0.9); opacity: 0.5; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Pop */
.scrollina-anim.pop-in { animation-name: scrollina-pop-in; }
@keyframes scrollina-pop-in {
  0% { transform: scale(0.5); opacity: 0; }
  80% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}