Individual transform properties
The square runs one keyframe timeline that sets rotate, scale, and translate independently; engines that lack them fall back to a classic transform string.
Modern Browsers
Quick implementation
@keyframes individual-transform-modern {
25% { rotate: 14deg; scale: 1.06; translate: 0 -10px; }
}
@supports (rotate: 0deg) {
.individual-transform-card { animation-name: individual-transform-modern; }
}Prompt this to your LLM
Playful loaders.
You are animating a square with individual transform longhands.
Goal: keyframes set rotate, scale, and translate separately (not a single transform string).
Constraints:
- Provide a transform() fallback for older engines.
- prefers-reduced-motion: static pose.
Return CSS.Why this matters in 2026
Split longhands make additive animations and hand-off to motion libraries easier than parsing transform strings.
The logic
Order of operations still follows CSS transform composition rules; you are just authoring channels separately.
Accessibility & performance
Disable the dance for reduced motion; test Safari and Firefox for @supports parity.