openmct/platform/commonUI/general/res/sass/_animations.scss

@include keyframes(rotation) {
    100% { transform: rotate(360deg); }
}

@include keyframes(rotation-centered) {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@include keyframes(clock-hands) {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg);  }
}

@include keyframes(clock-hands-sticky) {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    7% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    8% {
        transform: translate(-50%, -50%) rotate(30deg);
    }
    15% {
        transform: translate(-50%, -50%) rotate(30deg);
    }
    16% {
        transform: translate(-50%, -50%) rotate(60deg);
    }
    24% {
        transform: translate(-50%, -50%) rotate(60deg);
    }
    25% {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    32% {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    33% {
        transform: translate(-50%, -50%) rotate(120deg);
    }
    40% {
        transform: translate(-50%, -50%) rotate(120deg);
    }
    41% {
        transform: translate(-50%, -50%) rotate(150deg);
    }
    49% {
        transform: translate(-50%, -50%) rotate(150deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg);
    }
    57% {
        transform: translate(-50%, -50%) rotate(180deg);
    }
    58% {
        transform: translate(-50%, -50%) rotate(210deg);
    }
    65% {
        transform: translate(-50%, -50%) rotate(210deg);
    }
    66% {
        transform: translate(-50%, -50%) rotate(240deg);
    }
    74% {
        transform: translate(-50%, -50%) rotate(240deg);
    }
    75% {
        transform: translate(-50%, -50%) rotate(270deg);
    }
    82% {
        transform: translate(-50%, -50%) rotate(270deg);
    }
    83% {
        transform: translate(-50%, -50%) rotate(300deg);
    }
    90% {
        transform: translate(-50%, -50%) rotate(300deg);
    }
    91% {
        transform: translate(-50%, -50%) rotate(330deg);
    }
    99% {
        transform: translate(-50%, -50%) rotate(330deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}