hugo-theme-zzo/assets/sass/base/_animation.scss

// -- Slide Animations -- //

// Slide Out Top from Center
@include keyframes(slide-out-up) {
  0% {
    transform: translate(0,0);
    opacity: 0;
  }

  100% {
    transform: translate(0,-12%);
    opacity: 1;
  }
}

@include keyframes(slide-out-down) {
  0% {
    transform: translate(0,0);
    opacity: 0;
  }

  100% {
    transform: translate(0,12%);
    opacity: 1;
  }
}

// Slide Out Left from Center
@include keyframes(slide-out-left) {
  0% {
    transform: translate(0,0);
    opacity: 0;
  }

  100% {
    transform: translate(-12%,0);
    opacity: 1;
  }
}

// Slide out Right from Center
@include keyframes(slide-out-right) {
  0% {
    transform: translate(0,0);
    opacity: 0;
  }

  100% {
    transform: translate(12%,0);
    opacity: 1;
  }
}

@include keyframes(slide-in-up) {
  0% {
    transform: translate(0,12%);
    opacity: 0;
  }

  100% {
    transform: translate(0,0);
    opacity: 1;
  }
}

@include keyframes(slide-in-down) {
  0% {
    transform: translate(0,-12%);
    opacity: 0;
  }

  100% {
    transform: translate(0,0);
    opacity: 1;
  }
}

// Slide in Left to Center
@include keyframes(slide-in-left) {
  0% {
    transform: translate(-12%,0);
    opacity: 0;
  }

  100% {
    transform: translate(0,0);
    opacity: 1;
  }
}

// Slide in Right to Center
@include keyframes(slide-in-right) {
  0% {
    transform: translate(12%,0);
    opacity: 0;
  }

  100% {
    transform: translate(0,0);
    opacity: 1;
  }
}

@include keyframes(slide-in-down-2) {
  0% {
    transform: translate(0,-6%);
    opacity: 0;
  }

  100% {
    transform: translate(0,0);
    opacity: 1;
  }
}

@include keyframes(slide-in-down-3) {
  0% {
    transform: translate(0,-2%);
    opacity: 0;
  }

  100% {
    transform: translate(0,0);
    opacity: 1;
  }
}

@include keyframes(fade-in) {
  from { opacity: 0; }
  to   { opacity: 1; }
}