RaderHealth/RaderHealthWeb
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Files
c71b595b42eae253ebd2fd8488c72e148d00c783
RaderHealthWeb/public/assets/sass/_layout/_animation.scss
T
CHIEFSOFT\ameye 0429395219 first commit
2024-06-18 14:00:40 -04:00

337 lines
7.6 KiB
SCSS
Raw Blame History

/*All Animations Starts Here*/
@keyframes rotate {
0% {
@include transform(rotate(0deg))
}
100% {
@include transform(rotate(360deg))
}
}
@-webkit-keyframes rotate {
0% {
@include transform(rotate(0deg))
}
100% {
@include transform(rotate(360deg))
}
}
@-moz-keyframes rotate {
0% {
@include transform(rotate(0deg))
}
100% {
@include transform(rotate(360deg))
}
}
@keyframes rev-rotate {
0% {
@include transform(rotate(0deg))
}
100% {
@include transform(rotate(-360deg))
}
}
@-webkit-keyframes rev-rotate {
0% {
@include transform(rotate(0deg))
}
100% {
@include transform(rotate(-360deg))
}
}
@-moz-keyframes rev-rotate {
0% {
@include transform(rotate(0deg))
}
100% {
@include transform(rotate(-360deg))
}
}
@keyframes righTLeft {
0% {
right: 0;
@include transform(translateX(100%));
}
100% {
right: 100%;
@include transform(translateX(0));
}
}
@-webkit-keyframes righTLeft {
0% {
right: 0;
@include transform(translateX(100%));
}
100% {
right: 100%;
@include transform(translateX(0));
}
}
@-moz-keyframes righTLeft {
0% {
right: 0;
@include transform(translateX(100%));
}
100% {
right: 100%;
@include transform(translateX(0));
}
}
@keyframes lefTRight {
0% {
left: 0;
@include transform(translateX(-100%));
}
100% {
left: 100%;
@include transform(translateX(0));
}
}
@-webkit-keyframes lefTRight {
0% {
left: 0;
@include transform(translateX(-100%));
}
100% {
left: 100%;
@include transform(translateX(0));
}
}
@-moz-keyframes lefTRight {
0% {
left: 0;
@include transform(translateX(-100%));
}
100% {
left: 100%;
@include transform(translateX(0));
}
}
@keyframes zigZag {
0% {
@include transform(rotate(0deg)translate(-10px, -10px));
}
20% {
@include transform(rotate(360deg)translate(-100px, -100px));
}
40% {
@include transform(rotate(0deg)translate(100px, 100px));
}
60% {
@include transform(rotate(360deg)translate(10px, 10px));
}
80% {
@include transform(rotate(0deg)translate(70px, 70px));
}
100% {
@include transform(rotate(360deg)translate(-10px, -10px));
}
}
@keyframes outer-ripple {
0% {
transform: scale(1);
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-filter: alpha(opacity=50); }
80% {
transform: scale(1.5);
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5); }
100% {
transform: scale(3.5);
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(3.5);
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-o-transform: scale(3.5); } }
@-webkit-keyframes outer-ripple {
0% {
transform: scale(1.5);
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5); }
80% {
transform: scale(3.5);
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(3.5);
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-o-transform: scale(3.5); }
100% {
transform: scale(4.5);
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(4.5);
-moz-transform: scale(4.5);
-ms-transform: scale(4.5);
-o-transform: scale(4.5); } }
@-moz-keyframes outer-ripple {
0% {
transform: scale(1);
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-filter: alpha(opacity=50); }
80% {
transform: scale(1.5);
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5); }
100% {
transform: scale(3.5);
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(3.5);
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-o-transform: scale(3.5); } }
/* inner ripple */
@keyframes inner-ripple {
0% {
transform: scale(1);
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1); }
30% {
transform: scale(2);
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2); }
100% {
transform: scale(2.5);
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5); } }
@-webkit-keyframes inner-ripple {
0% {
transform: scale(2);
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2); }
30% {
transform: scale(2.5);
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5); }
100% {
transform: scale(3.5);
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(3.5);
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-o-transform: scale(3.5); } }
@-moz-keyframes inner-ripple {
0% {
transform: scale(2);
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2); }
30% {
transform: scale(2.5);
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5); }
100% {
transform: scale(3.5);
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(3.5);
-moz-transform: scale(3.5);
-ms-transform: scale(3.5);
-o-transform: scale(3.5); } }
@keyframes rotate2 {
0% {
@include transform(translate(-50%, -50%)rotate(0deg));
}
100% {
@include transform(translate(-50%, -50%)rotate(1440deg));
}
}
@keyframes zigZag2 {
0% {
@include transform(rotate(0deg)translate(-10px, -10px));
}
20% {
@include transform(rotate(360deg)translate(-10px, -10px));
}
40% {
@include transform(rotate(0deg)translate(10px, 10px));
}
60% {
@include transform(rotate(360deg)translate(10px, 10px));
}
80% {
@include transform(rotate(0deg)translate(10px, 10px));
}
100% {
@include transform(rotate(360deg)translate(-10px, -10px));
}
}
@keyframes upDown {
0% {
@include transform(translateY(-20px));
}
100% {
@include transform(translateY(20px));
}
}
@-webkit-keyframes upDown {
0% {
@include transform(translateY(-20px));
}
100% {
@include transform(translateY(20px));
}
}
@-moz-keyframes upDown {
0% {
@include transform(translateY(-20px));
}
100% {
@include transform(translateY(20px));
}
}
/*All Animation Ends Here*/
Reference in New Issue View Git Blame Copy Permalink