@charset "utf-8";

/* Animation */

.fadein {
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0
}
.fadein.active {
  opacity: 1
}
.fadein.move-to-top {
  -webkit-transform: translateY(50px);
  transform: translateY(50px)
}
.fadein.move-to-top.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.fadein.move-to-bottom {
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px)
}
.fadein.move-to-bottom.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.fadein.move-to-left {
  -webkit-transform: translateX(50px);
  transform: translateX(50px)
}
.fadein.move-to-left.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}
.fadein.move-to-right {
  -webkit-transform: translateX(-50px);
  transform: translateX(-50px)
}
.fadein.move-to-right.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}

.fadeout {
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 1
}
.fadeout.active {
  opacity: 0
}
.fadeout.move-to-top {
  -webkit-transform: translateY(50px);
  transform: translateY(50px)
}
.fadeout.move-to-top.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.fadeout.move-to-bottom {
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px)
}
.fadeout.move-to-bottom.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.fadeout.move-to-left {
  -webkit-transform: translateX(50px);
  transform: translateX(50px)
}
.fadeout.move-to-left.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}
.fadeout.move-to-right {
  -webkit-transform: translateX(-50px);
  transform: translateX(-50px)
}
.fadeout.move-to-right.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}

.rotate {
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0
}
.rotate.active {
  -webkit-transform: rotate(0) scale(1, 1);
  transform: rotate(0) scale(1, 1);
  opacity: 1
}
.rotate.move-to-top {
  -webkit-transform: translateY(500px) rotate(-45deg) scale(0.5, 0.5);
  transform: translateY(500px) rotate(-45deg) scale(0.5, 0.5)
}
.rotate.move-to-top.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.rotate.move-to-bottom {
  -webkit-transform: translateY(-500px) rotate(-45deg) scale(0.5, 0.5);
  transform: translateY(-500px) rotate(-45deg) scale(0.5, 0.5)
}
.rotate.move-to-bottom.active {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
.rotate.move-to-left {
  -webkit-transform: translateX(500px) rotate(45deg) scale(0.5, 0.5);
  transform: translateX(500px) rotate(45deg) scale(0.5, 0.5)
}
.rotate.move-to-left.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}
.rotate.move-to-right {
  -webkit-transform: translateX(-500px) rotate(-45deg) scale(0.5, 0.5);
  transform: translateX(-500px) rotate(-45deg) scale(0.5, 0.5)
}
.rotate.move-to-right.active {
  -webkit-transform: translateX(0);
  transform: translateX(0)
}
SCSSのコードサンプル
@charset "utf-8";

/* Animation */

.fadein {
  transition: all 1s;
  opacity: 0;
  &.active {
    opacity: 1;
  }
  &.move-to-top {
    transform: translateY(50px);
    &.active {
      transform: translateY(0);
    }
  }
  &.move-to-bottom {
    transform: translateY(-50px);
    &.active {
      transform: translateY(0);
    }
  }
  &.move-to-left {
    transform: translateX(50px);
    &.active {
      transform: translateX(0);
    }
  }
  &.move-to-right {
    transform: translateX(-50px);
    &.active {
      transform: translateX(0);
    }
  }
}

.fadeout {
  transition: all 1s;
  opacity: 1;
  &.active {
    opacity: 0;
  }
  &.move-to-top {
    transform: translateY(50px);
    &.active {
      transform: translateY(0);
    }
  }
  &.move-to-bottom {
    transform: translateY(-50px);
    &.active {
      transform: translateY(0);
    }
  }
  &.move-to-left {
    transform: translateX(50px);
    &.active {
      transform: translateX(0);
    }
  }
  &.move-to-right {
    transform: translateX(-50px);
    &.active {
      transform: translateX(0);
    }
  }
}

.rotate {
  transition: all 1s;
  opacity: 0;
  &.active {
    transform: rotate(0) scale(1,1);
    opacity: 1;
  }
  &.move-to-top {
    transform: translateY(500px) rotate(45deg) scale(0.5,0.5);
    &.active {
      transform: translateY(0);
    }
  }
  &.move-to-bottom {
    transform: translateY(-500px) rotate(-45deg) scale(0.5,0.5);
    &.active {
      transform: translateY(0);
    }
  }
  &.move-to-left {
    transform: translateX(500px) rotate(45deg) scale(0.5,0.5);
    &.active {
      transform: translateX(0);
    }
  }
  &.move-to-right {
    transform: translateX(-500px) rotate(-45deg) scale(0.5,0.5);
    &.active {
      transform: translateX(0);
    }
  }
}