.revx-btn-animation {
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
cursor: pointer;
}
.revx-btn-zoomIn {
animation-name: btnZoomIn;
}
.revx-btn-shake {
animation-name: btnShake;
}
.revx-btn-bounce {
animation-name: btnBounce;
}
.revx-btn-wobble {
animation-name: btnWobble;
}
.revx-btn-pulse {
animation-name: btnPulse;
} @keyframes btnZoomIn {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes btnShake {
0%, 100% {
transform: translateX(0);
}
25%, 75% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
}
@keyframes btnBounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-10px);
}
}
@keyframes btnWobble {
0%, 100% {
transform: rotate(0);
}
15% {
transform: rotate(-10deg);
}
30% {
transform: rotate(7deg);
}
45% {
transform: rotate(-7deg);
}
60% {
transform: rotate(5deg);
}
75% {
transform: rotate(-1deg);
}
}
@keyframes btnPulse {
0%, 100% {
transform: scale(1);
}
30%, 70% {
transform: scale(1.2);
}
}