/* 下から上 */
.fadeup { opacity: 0; transform: translateY(30px); }
.fadeup.is-animated{
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: var(--delay, 0s);
} 
@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 左から右 */
.faderight { opacity: 0; transform: translateX(-30px); }
.faderight.is-animated{
  animation: faderight 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes faderight{
  0%   { transform: translateX(-30px); opacity: 0; }
  80%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}