Skip to content

Instantly share code, notes, and snippets.

@utopianfool
Created September 22, 2020 08:01
Show Gist options
  • Save utopianfool/e263560b43cc6fa96da8635f53de9cb1 to your computer and use it in GitHub Desktop.
Save utopianfool/e263560b43cc6fa96da8635f53de9cb1 to your computer and use it in GitHub Desktop.
Extra wow animations in 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment