|
Server : Apache System : Linux vps.urbanovitalino.adv.br 3.10.0-1062.12.1.el7.x86_64 #1 SMP Tue Feb 4 23:02:59 UTC 2020 x86_64 User : urbanovitalinoad ( 1001) PHP Version : 7.3.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/urbanovitalinoad/public_html/next/templates/shaper_helixultimate/scss/ |
Upload File : |
@keyframes spFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes spFadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spFadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spZoomIn {
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
100% {
opacity: 1;
}
}
@keyframes spRotateIn {
from {
transform-origin: center;
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
transform-origin: center;
transform: none;
opacity: 1;
}
}
@keyframes spPulse {
from {
opacity: 0;
transform: scale3d(1, 1, 1);
}
50% {
opacity: 0.5;
transform: scale3d(1.05, 1.05, 1.05);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes spSpin {
to {
transform: rotate(360deg);
}
}
/* Preloader animations */
// loader keyframes
// Clock Loader Animation
@-webkit-keyframes grdAiguille {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes grdAiguille {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes ptAiguille {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes ptAiguille {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
// Circle Loader Animation
@-webkit-keyframes loader1 {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes loader1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
// Bubble Loop Loader Animation
@-webkit-keyframes loader6 {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
@keyframes loader6 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
// Ring Loader Animation
@keyframes rotate-360 {
from {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
// Audio Wave Loader Animation
@keyframes audioWave {
25% {
background: linear-gradient($link_color, $link_color) 0 50%,
linear-gradient($link_color, $link_color) 0.625em 50%,
linear-gradient($link_color, $link_color) 1.25em 50%,
linear-gradient($link_color, $link_color) 1.875em 50%,
linear-gradient($link_color, $link_color) 2.5em 50%;
background-repeat: no-repeat;
background-size: 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em,
0.5em 0.25em;
}
37.5% {
background: linear-gradient($link_color, $link_color) 0 50%,
linear-gradient($link_color, $link_color) 0.625em 50%,
linear-gradient($link_color, $link_color) 1.25em 50%,
linear-gradient($link_color, $link_color) 1.875em 50%,
linear-gradient($link_color, $link_color) 2.5em 50%;
background-repeat: no-repeat;
background-size: 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em,
0.5em 0.25em;
}
50% {
background: linear-gradient($link_color, $link_color) 0 50%,
linear-gradient($link_color, $link_color) 0.625em 50%,
linear-gradient($link_color, $link_color) 1.25em 50%,
linear-gradient($link_color, $link_color) 1.875em 50%,
linear-gradient($link_color, $link_color) 2.5em 50%;
background-repeat: no-repeat;
background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em,
0.5em 0.25em;
}
62.5% {
background: linear-gradient($link_color, $link_color) 0 50%,
linear-gradient($link_color, $link_color) 0.625em 50%,
linear-gradient($link_color, $link_color) 1.25em 50%,
linear-gradient($link_color, $link_color) 1.875em 50%,
linear-gradient($link_color, $link_color) 2.5em 50%;
background-repeat: no-repeat;
background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em,
0.5em 0.25em;
}
75% {
background: linear-gradient($link_color, $link_color) 0 50%,
linear-gradient($link_color, $link_color) 0.625em 50%,
linear-gradient($link_color, $link_color) 1.25em 50%,
linear-gradient($link_color, $link_color) 1.875em 50%,
linear-gradient($link_color, $link_color) 2.5em 50%;
background-repeat: no-repeat;
background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em,
0.5em 2em;
}
}
// Circle 2 Loader Animation
@-webkit-keyframes effect-2 {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes effect-2 {
from {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
// Audio Wave Loader 2 animation
@keyframes sequence1 {
0% {
height: 10px;
}
50% {
height: 50px;
}
100% {
height: 10px;
}
}
@keyframes sequence2 {
0% {
height: 20px;
}
50% {
height: 65px;
}
100% {
height: 20px;
}
}
@keyframes rot1 {
100% {
transform: skew(-10deg) translateX(50px) rotate(405deg);
}
}
@-webkit-keyframes rot1 {
100% {
-webkit-transform: skew(-10deg) translateX(50px) rotate(405deg);
}
}
@keyframes rot2 {
100% {
transform: skew(-10deg) rotate(525deg);
}
}
@-webkit-keyframes rot2 {
100% {
-webkit-transform: skew(-10deg) rotate(525deg);
}
}
@keyframes rot3 {
100% {
transform: skew(-10deg) translateX(20px) translateY(-50px)
rotate(645deg);
}
}
@-webkit-keyframes rot3 {
100% {
-webkit-transform: skew(-10deg) translateX(20px) translateY(-50px)
rotate(645deg);
}
}
@keyframes width {
10% {
width: 10%;
}
20% {
width: 20%;
}
30% {
width: 30%;
}
40% {
width: 40%;
}
50% {
width: 50%;
}
60% {
width: 60%;
}
70% {
width: 70%;
}
80% {
width: 80%;
}
90% {
width: 90%;
}
100% {
width: 100%;
}
}