﻿
.osc-rotation {
    box-sizing: border-box;
    animation: oscillate-rotation 1s infinite ease-in-out;
    transform-origin: 50% 50%;
}

@keyframes ring-circle-anim {
    0% {
        transform: rotate(0) scale(1.1) skew(0deg);
        opacity: 0;
    }

    30% {
        transform: rotate(0) scale(1.5) skew(0deg);
        opacity: 0.5;
    }

    100% {
        transform: rotate(0) scale(1.7) skew(0deg);
        opacity: 0.1;
    }
}

@keyframes ring-circle-fill-anim {
    0% {
        transform: rotate(0) scale(1) skew(0deg);
        opacity: 0.2;
    }

    50% {
        transform: rotate(0) scale(1.4) skew(0deg);
        opacity: 0.2;
    }

    100% {
        transform: rotate(0) scale(1.1) skew(0deg);
        opacity: 0.2;
    }
}

@keyframes oscillate-rotation {
    0% {
        transform: rotate(0) scale(1) skew(0deg);
    }

    10% {
        transform: rotate(-25deg) scale(1) skew(0deg);
    }

    20% {
        transform: rotate(25deg) scale(1) skew(0deg);
    }

    30% {
        transform: rotate(-25deg) scale(1) skew(0deg);
    }

    40% {
        transform: rotate(25deg) scale(1) skew(0deg);
    }

    50% {
        transform: rotate(0) scale(1) skew(0deg);
    }

    100% {
        transform: rotate(0) scale(1) skew(0deg);
    }
}
