.topppa-interactive-animations {
transition-property: opacity, transform;
will-change: opacity, transform;
} .elementor-editor-active .topppa-interactive-animations {
opacity: 1 !important;
transform: none !important;
} .tp-section-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-repeat: no-repeat;
pointer-events: none;
}
.shapeanimation {
-webkit-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
animation-duration: 9s;
-webkit-animation-duration: 9s;
z-index: -1;
} @-webkit-keyframes shapeMover {
0%, 100% {
-webkit-transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
}
50% {
-webkit-transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
}
}
@keyframes shapeMover {
0%, 100% {
-webkit-transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
}
50% {
-webkit-transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
}
}
@keyframes shapeMover {
0%, 100% {
transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
}
50% {
transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
}
}
@keyframes bubbleMover {
0% {
-webkit-transform: translateY(0px) translateX(0) rotate(0);
transform: translateY(0px) translateX(0) rotate(0);
}
30% {
-webkit-transform: translateY(30px) translateX(50px) rotate(15deg);
transform: translateY(30px) translateX(50px) rotate(15deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
50% {
-webkit-transform: translateY(50px) translateX(100px) rotate(45deg);
transform: translateY(50px) translateX(100px) rotate(45deg);
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
}
80% {
-webkit-transform: translateY(30px) translateX(50px) rotate(15deg);
transform: translateY(30px) translateX(50px) rotate(15deg);
-webkit-transform-origin: left top;
transform-origin: left top;
}
100% {
-webkit-transform: translateY(0px) translateX(0) rotate(0);
transform: translateY(0px) translateX(0) rotate(0);
-webkit-transform-origin: center center;
transform-origin: center center;
}
}
@keyframes rounded {
0% {
transform: rotate(0);
-webkit-transform: rotate(0);
}
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.topppa-interactive-animations[data-animation-type=spinner] {
-webkit-animation-name: spin;
animation-name: spin;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@keyframes bounce-anim {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, 30px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.topppa-interactive-animations[data-animation-type=bounce-anim] {
animation-name: bounce-anim;
animation-duration: inherit;
animation-delay: inherit;
animation-iteration-count: infinite;
animation-timing-function: inherit;
}