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