.animate { animation-fill-mode: forwards; }
.animate.fast { animation-duration: 0.5s; }
.animate.normal { animation-duration: 1.5s; }
.animate.slow { animation-duration: 4.5s; }

@keyframes slideRight {
  from { transform:translateX(-100%); opacity:0;  }
  to { transform:translateX(0); opacity:1; }
}
.animate.slideRight { animation-name: slideRight; }

@keyframes slideLeft {
  from { transform:translateX(100%); opacity:0;  }
  to { transform:translateX(0); opacity:1; }
}
.animate.slideLeft { animation-name: slideLeft; }

@keyframes slideDown {
  from { transform:translateY(-100%); opacity:0;  }
  to { transform:translateY(0); opacity:1; }
}
.animate.slideDown { animation-name: slideDown; }

@keyframes slideUp {
  from { transform:translateY(-100%); opacity:0;  }
  to { transform:translateY(0); opacity:1; }
}
.animate.slideUp { animation-name: slideUp; }

@keyframes fadeIn {
  from { opacity:0;  }
  to { opacity:1; }
}
.animate.fadeIn { animation-name: fadeIn; }

@keyframes grow {
  from { transform:scale(0%); }
  to { transform:scale(100%); }
}
.animate.grow { animation-name: grow; }

@keyframes pulse {
  from { transform:scale(100%); }
  50% { transform:scale(120%); }
  to { transform:scale(100%); }
}
.animate.pulse { animation-name: pulse; }

@keyframes shrink {
  from { transform:scale(120%); }
  to { transform:scale(100%); }
}
.animate.shrink { animation-name: shrink; }

@keyframes colorize {
  from { filter: grayscale(1) }
  to { filter: grayscale(0) }
}
.animate.colorize { animation-name: colorize; }

@keyframes focus {
  from { filter: blur(20px) }
  to { filter: blur(0px) }
}
.animate.focus { animation-name: focus; }