@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); } }