:root {
--pulse-color: #00CEA699;
--pulse-width: 32px;
--duration-pulse: 1.5s;
--duration-rotate: 10s;
--animated-icon-infinite:infinite;
}
.rkit-video-button-wrapper {
display: flex;
align-items: center;
justify-content: start;
}
.rkit-video-button-container {
position: relative;
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.rkit-video-button-container .rkit-video-button{
transform-origin: center;
position: absolute;
width: 142px;
height: 142px;
}
.rkit-animated-icon-container {
width: 84px;
height: 84px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: antiquewhite;
z-index: 1;
cursor: pointer;
}
.rkit-animated-icon-container .rkit-animated-icon {
width: 29px;
height: 29px;
font-size: 29px;
}
.rkit-animation-shadowPulse {
animation: shadowPulse var(--duration-pulse) linear infinite;
}
@keyframes rotateText {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes shadowPulse {
0% {
box-shadow: 0 0 0 0px var(--pulse-color);
}
100% {
box-shadow: 0 0 7px var(--pulse-width) rgba(0, 0, 0, 0);
}
}
@keyframes bounce-up-down {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.rotate-180 {
animation: rotate-180-animation 1s infinite alternate ease-in-out;
}
@keyframes rotate-180-animation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}  .rkit-video-button-container:hover.grow {
transform: scale(1.1);
transition: transform 0.3s ease;
} .rkit-video-button-container:hover.shrink {
transform: scale(0.9);
transition: transform 0.3s ease;
} .rkit-video-button-container:hover.pulse {
animation: pulseAnimation 0.6s ease-in-out;
}
@keyframes pulseAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
} .rkit-video-button-container:hover.wobble {
animation: wobbleAnimation 0.8s ease-in-out;
}
@keyframes wobbleAnimation {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
50% {
transform: rotate(-5deg);
}
75% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
} .rkit-video-button-container:hover.skew {
transform: skewX(10deg);
transition: transform 0.3s ease;
} .rkit-video-button-container:hover.rotate {
transform: rotate(10deg);
transition: transform 0.3s ease;
} .rkit-video-button-container:hover.slide-up {
transform: translateY(-10px);
transition: transform 0.3s ease;
} .rkit-video-button-container:hover.slide-down {
transform: translateY(10px);
transition: transform 0.3s ease;
} .rkit-video-button-container:hover.slide-left {
transform: translateX(-10px);
transition: transform 0.3s ease;
} .rkit-video-button-container:hover.slide-right {
transform: translateX(10px);
transition: transform 0.3s ease;
} .rkit-video-button-container:hover.bounce {
animation: bounceAnimation 0.6s ease;
}
@keyframes bounceAnimation {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
} .rkit-video-button-container:hover.flip {
transform: rotateY(180deg);
transition: transform 0.6s ease;
} .rkit-video-button-container:hover.flip-x {
transform: rotateX(180deg);
transition: transform 0.6s ease;
} .rkit-video-button-container:hover.flip-y {
transform: rotateY(180deg);
transition: transform 0.6s ease;
} .rkit-video-button-container:hover.zoom-in {
transform: scale(1.2);
transition: transform 0.3s ease;
} .rkit-video-button-container:hover.zoom-out {
transform: scale(0.8);
transition: transform 0.3s ease;
} .rkit-video-button-container:hover.float {
animation: floatAnimation 2s ease-in-out infinite;
}
@keyframes floatAnimation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0);
}
} .rkit-video-button-container:hover.tada {
animation: tadaAnimation 0.8s ease;
}
@keyframes tadaAnimation {
0% {
transform: scale(1);
}
10%,
20% {
transform: scale(0.9) rotate(-3deg);
}
30%,
50%,
70%,
90% {
transform: scale(1.1) rotate(3deg);
}
40%,
60%,
80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
} .rkit-video-button-container:hover.shake {
animation: shakeAnimation 0.5s ease;
}
@keyframes shakeAnimation {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
} .rkit-video-button-container:hover.rubber-band {
animation: rubberBandAnimation 1s ease;
}
@keyframes rubberBandAnimation {
0% {
transform: scale(1);
}
30% {
transform: scaleX(1.25) scaleY(0.75);
}
40% {
transform: scaleX(0.75) scaleY(1.25);
}
50% {
transform: scaleX(1.15) scaleY(0.85);
}
65% {
transform: scaleX(0.95) scaleY(1.05);
}
75% {
transform: scaleX(1.05) scaleY(0.95);
}
100% {
transform: scale(1);
}
}