Extra wow animations in SCSS

extra-wow-animations.scss

/* WOW animations */

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
@keyframes "swoopup" {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px);
    }
    75% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
}
@-webkit-keyframes "swoopup" {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    75% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}
.swoopup {
    opacity: 0;
    transform: translateY(50px);
    -webkit-animation-name: swoopup;
    animation-name: swoopup;
    will-change: transform;
    &:nth-of-type(1) {
        -webkit-animation: swoopup 1s 0.2s forwards;
        animation: swoopup 1s 0.2s forwards;
        will-change: transform;
    }
    &:nth-of-type(2) {
        -webkit-animation: swoopup 1s 0.8s forwards;
        animation: swoopup 1s 0.8s forwards;
        will-change: transform;
    }
    &:nth-of-type(3) {
        -webkit-animation: swoopup 1s 1.2s forwards;
        animation: swoopup 1s 1.2s forwards;
        will-change: transform;
    }
}
@media (max-width: 768px) {
    .swoopup {
        opacity: 0;
        transform: translateY(50px);
        -webkit-animation-name: swoopup;
        animation-name: swoopup;
        will-change: transform;
        &:nth-of-type(1) {
            -webkit-animation: swoopup 0.5s forwards;
            animation: swoopup 0.5s forwards;
            will-change: transform;
        }
        &:nth-of-type(2) {
            -webkit-animation: swoopup 0.5s 0.2s forwards;
            animation: swoopup 0.5s 0.2s forwards;
            will-change: transform;
        }
        &:nth-of-type(3) {
            -webkit-animation: swoopup 0.5s 0.4s forwards;
            animation: swoopup 0.5s 0.4s forwards;
            will-change: transform;
        }
    }
}
@keyframes "swoopinCascade" {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    75% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
    }
}
@-webkit-keyframes "swoopinCascade" {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
    }
    75% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}
.swoopinCascade {
    -webkit-animation-name: swoopinCascade;
    animation-name: swoopinCascade;
    will-change: transform;
    @for $i from 1 through 16 {
        &:nth-of-type(#{$i}) {
            -webkit-animation-delay: $i * 0.35s;
            -moz-animation-delay:$i * 0.35s;
            animation-delay:$i * 0.35s;
        }
    }
}
@media (max-width: 768px) {
    .swoopinCascade {
        -webkit-animation-name: swoopinCascade;
        animation-name: swoopinCascade;
        will-change: transform;
        @for $i from 1 through 16 {
            &:nth-of-type(#{$i}) {
                -webkit-animation-delay: $i * 0.15s;
                -moz-animation-delay:$i * 0.15s;
                animation-delay:$i * 0.15s;
            }
        }
    }
}
@-webkit-keyframes "slideInUpper" {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes "slideInUpper" {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.slideInUpper {
    -webkit-animation-name: slideInUpper;
    animation-name: slideInUpper;
    will-change: transform;
}