673 lines
12 KiB
SCSS
673 lines
12 KiB
SCSS
.ripple-animation {
|
|
animation-duration: var(--ripple-ani-duration);
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
animation-name: ripple;
|
|
}
|
|
|
|
@keyframes ripple {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 0;
|
|
}
|
|
|
|
30% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(2.1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.movingX {
|
|
animation: movingX 8s linear infinite;
|
|
}
|
|
@keyframes movingX {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
transform: translateX(50px);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.moving {
|
|
animation: moving 8s linear infinite;
|
|
}
|
|
@keyframes moving {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
transform: translateX(-50px);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.jump {
|
|
animation: jumpAni 7s linear infinite;
|
|
}
|
|
.jump1 {
|
|
animation: jumpAni 6s linear infinite;
|
|
}
|
|
.jump2 {
|
|
animation: jumpAni 5s linear infinite;
|
|
}
|
|
.jump3 {
|
|
animation: jumpAni 4s linear infinite;
|
|
}
|
|
@keyframes jumpAni {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
40% {
|
|
transform: translateY(-30px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.jump-reverse {
|
|
animation: jumpReverseAni 7s linear infinite;
|
|
}
|
|
@keyframes jumpReverseAni {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(30px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.spin {
|
|
animation: spin 15s linear infinite;
|
|
}
|
|
.spin-slow {
|
|
animation: spin 50s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0);
|
|
}
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
.spin2 {
|
|
animation: spin2 15s linear infinite;
|
|
}
|
|
@keyframes spin2 {
|
|
0% {
|
|
transform: rotate(0);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
// This is for Progress bar animation also has a js code
|
|
@keyframes animate-positive {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
.scalein.slider-animated {
|
|
--animation-name: scalein;
|
|
}
|
|
|
|
.slidetopleft.slider-animated {
|
|
--animation-name: slidetopleft;
|
|
}
|
|
|
|
.slidebottomright.slider-animated {
|
|
--animation-name: slidebottomright;
|
|
}
|
|
|
|
.slideinleft.slider-animated {
|
|
--animation-name: slideinleft;
|
|
}
|
|
|
|
.slideinright.slider-animated {
|
|
--animation-name: slideinright;
|
|
}
|
|
|
|
.slideinup.slider-animated {
|
|
--animation-name: slideinup;
|
|
}
|
|
|
|
.slideindown.slider-animated {
|
|
--animation-name: slideindown;
|
|
}
|
|
.rollinleft.slider-animated {
|
|
--animation-name: rollinleft;
|
|
}
|
|
.rollinright.slider-animated {
|
|
--animation-name: rollinright;
|
|
}
|
|
|
|
.scalein,
|
|
.slidetopleft,
|
|
.slidebottomright,
|
|
.slideinleft,
|
|
.slideinright,
|
|
.slideindown,
|
|
.slideinup,
|
|
.rollinleft,
|
|
.rollinright {
|
|
opacity: 0;
|
|
animation-fill-mode: both;
|
|
animation-iteration-count: 1;
|
|
animation-duration: 1s;
|
|
animation-delay: 0.3s;
|
|
animation-name: var(--animation-name);
|
|
}
|
|
|
|
.slider-animated {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes slideinup {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(70px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideinright {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(70px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideindown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-70px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideinleft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-70px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slidebottomright {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(100px) translateY(100px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slidetopleft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-100px) translateY(-100px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
0% {
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
}
|
|
75% {
|
|
border-top-color: #fff;
|
|
border-left-color: #fff;
|
|
border-right-color: #fff;
|
|
border-bottom-color: transparent;
|
|
}
|
|
100% {
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes heroSliderAnimation {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes heroSliderAnimation {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
-ms-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ========= Hero Slider BG Animation animation ========== */
|
|
|
|
@-webkit-keyframes bg-animation {
|
|
0% {
|
|
-webkit-transform: scale(1) translateY(0);
|
|
transform: scale(1) translateY(0);
|
|
-webkit-transform-origin: 50% 16%;
|
|
transform-origin: 50% 16%;
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1.2) translateY(-15px);
|
|
transform: scale(1.25) translateY(-15px);
|
|
-webkit-transform-origin: top;
|
|
transform-origin: top;
|
|
}
|
|
}
|
|
@keyframes bg-animation {
|
|
0% {
|
|
-webkit-transform: scale(1) translateY(0);
|
|
transform: scale(1) translateY(0);
|
|
-webkit-transform-origin: 50% 16%;
|
|
transform-origin: 50% 16%;
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1.2) translateY(-15px);
|
|
transform: scale(1.25) translateY(-15px);
|
|
-webkit-transform-origin: top;
|
|
transform-origin: top;
|
|
}
|
|
}
|
|
|
|
// rotate-in-center
|
|
|
|
@-webkit-keyframes rotate-in-center {
|
|
0% {
|
|
-webkit-transform: rotate(-360deg);
|
|
transform: rotate(-360deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
@keyframes rotate-in-center {
|
|
0% {
|
|
-webkit-transform: rotate(-360deg);
|
|
transform: rotate(-360deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
|
|
// slide-top
|
|
|
|
@-webkit-keyframes slide-top {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-100px);
|
|
transform: translateY(-100px);
|
|
}
|
|
}
|
|
@keyframes slide-top {
|
|
0% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-100px);
|
|
transform: translateY(-100px);
|
|
}
|
|
}
|
|
|
|
// scale-down-center
|
|
|
|
@-webkit-keyframes scale-down-center {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(0.5);
|
|
transform: scale(0.5);
|
|
}
|
|
}
|
|
@keyframes scale-down-center {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(0.5);
|
|
transform: scale(0.5);
|
|
}
|
|
}
|
|
|
|
// slide-right
|
|
|
|
@-webkit-keyframes slide-right {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateX(100px);
|
|
transform: translateX(100px);
|
|
}
|
|
}
|
|
@keyframes slide-right {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateX(100px);
|
|
transform: translateX(100px);
|
|
}
|
|
}
|
|
|
|
//
|
|
|
|
@-webkit-keyframes animationFramesOne {
|
|
0% {
|
|
transform: translate(0) rotate(0deg);
|
|
}
|
|
|
|
20% {
|
|
transform: translate(73px, -1px) rotate(36deg);
|
|
}
|
|
|
|
40% {
|
|
transform: translate(141px, 72px) rotate(72deg);
|
|
}
|
|
|
|
60% {
|
|
transform: translate(83px, 122px) rotate(108deg);
|
|
}
|
|
|
|
80% {
|
|
transform: translate(-40px, 72px) rotate(144deg);
|
|
}
|
|
|
|
to {
|
|
transform: translate(0) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes animationFramesOne {
|
|
0% {
|
|
transform: translate(0) rotate(0deg);
|
|
}
|
|
|
|
20% {
|
|
transform: translate(73px, -1px) rotate(36deg);
|
|
}
|
|
|
|
40% {
|
|
transform: translate(141px, 72px) rotate(72deg);
|
|
}
|
|
|
|
60% {
|
|
transform: translate(83px, 122px) rotate(108deg);
|
|
}
|
|
|
|
80% {
|
|
transform: translate(-40px, 72px) rotate(144deg);
|
|
}
|
|
|
|
to {
|
|
transform: translate(0) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
/* 00. ========= pluse animation ========== */
|
|
@-webkit-keyframes pulse {
|
|
0% {
|
|
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
|
|
}
|
|
70% {
|
|
-webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
|
|
}
|
|
100% {
|
|
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
@keyframes pulse {
|
|
0% {
|
|
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
|
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
|
|
}
|
|
70% {
|
|
-moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
|
|
box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
|
|
}
|
|
100% {
|
|
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
|
|
/* 00. ========= pluse small animation ========== */
|
|
@-webkit-keyframes pulse-small {
|
|
0% {
|
|
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
|
|
}
|
|
70% {
|
|
-webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
|
|
}
|
|
100% {
|
|
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
@keyframes pulse-small {
|
|
0% {
|
|
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
|
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
|
|
}
|
|
70% {
|
|
-moz-box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
|
|
box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
|
|
}
|
|
100% {
|
|
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
|
|
// Trigger animation
|
|
|
|
@keyframes trigger {
|
|
50% {
|
|
transform: rotate(-4deg);
|
|
}
|
|
80% {
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
@-webkit-keyframes trigger {
|
|
50% {
|
|
transform: rotate(-4deg);
|
|
}
|
|
80% {
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
/* 00. ========= video-ripple ========== */
|
|
@keyframes video-ripple {
|
|
0%,
|
|
35% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
-webkit-transform: scale(1.3);
|
|
transform: scale(1.3);
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
@-webkit-keyframes video-ripple {
|
|
0%,
|
|
35% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
-webkit-transform: scale(1.3);
|
|
transform: scale(1.3);
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
/* 00. ========= FadeIn custom ========== */
|
|
@-webkit-keyframes fadeInUp2 {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes fadeInUp2 {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(20px);
|
|
-ms-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.fadeInUp2 {
|
|
-webkit-animation-name: fadeInUp2;
|
|
animation-name: fadeInUp2;
|
|
}
|
|
|
|
/* 00. ========= modeal-video-animation ========== */
|
|
@keyframes waveAlarm {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 40%;
|
|
}
|
|
100% {
|
|
transform: scale(2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* 00. ========= ripple animation ========== */
|
|
@keyframes popupBtn {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: scale(1.6);
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
transform: scale(2.2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* ========= sticky animation ========== */
|
|
@-webkit-keyframes sticky {
|
|
0% {
|
|
-webkit-transform: translateY(-100%);
|
|
transform: translateY(-100%);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0%);
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
@keyframes sticky {
|
|
0% {
|
|
-webkit-transform: translateY(-100%);
|
|
transform: translateY(-100%);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(0%);
|
|
transform: translateY(0%);
|
|
}
|
|
}
|