Match CSS animation keyframe transforms (opens in new tab)
My loader spinner wasn’t spinning. .loader-spinner { animation: spinLoader 600ms steps(12, end) infinite; } @keyframes spinLoader { from { transform: translate( -50%, -50% ); } to { transform: translate( -50%, -50% ) rotate(1turn); } } The problem was that the keyframes for transform need to match. Even though there’s an implicit rotate(0turn) in the transform value, it’s required to be explicit for animation keyframes. @keyframes spinLoader { /* match transform values */ from { transform: tr...
Read the original article