{
    "slug": "css_animations",
    "term": "CSS Animations & Transitions",
    "category": "frontend",
    "difficulty": "intermediate",
    "short": "CSS transitions animate property changes smoothly; keyframe animations define multi-step sequences — both should use GPU-composited properties (transform, opacity) for smooth 60fps.",
    "long": "CSS transitions: transition: property duration easing — animate between two states on event. Keyframe animations: @keyframes + animation property — define multi-step sequences that play automatically. For performance, only animate properties that the browser can composite on the GPU without triggering layout: transform (translate, scale, rotate) and opacity. Animating width, height, top, left, or color triggers layout/paint, causing jank. Use will-change: transform as a hint for complex animations. prefers-reduced-motion media query should disable or reduce animations for users who request it.",
    "aliases": [
        "CSS transition",
        "keyframe animation",
        "will-change",
        "60fps"
    ],
    "tags": [
        "frontend",
        "css",
        "performance",
        "animations"
    ],
    "misconception": "All CSS animations are hardware-accelerated — only transform and opacity are composited by the GPU; animating width, height, or background-color triggers expensive layout recalculation.",
    "why_it_matters": "Animating the wrong CSS properties causes layout thrashing and dropped frames — a smooth animation uses transform, a janky one animates width or top.",
    "common_mistakes": [
        "Animating width/height for expand effects — use transform: scaleY() instead.",
        "Animating left/top for movement — use transform: translateX/Y() instead.",
        "Not respecting prefers-reduced-motion — vestibular disorders make animations cause physical discomfort.",
        "will-change on every element — hints consume GPU memory; use only on elements with complex animations."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "web_vitals",
        "critical_rendering_path",
        "css_specificity",
        "accessibility_aria"
    ],
    "prerequisites": [
        "web_vitals",
        "css_custom_properties",
        "responsive_design_patterns"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance"
    ],
    "bad_code": "/* Janky — triggers layout on every frame:\n.box {\n    transition: width 0.3s, left 0.3s; /* Layout properties — CPU bound */\n}\n.box:hover {\n    width: 200px;  /* Forces layout recalculation */\n    left: 100px;   /* Forces layout recalculation */\n}",
    "good_code": "/* Smooth — GPU composited:\n.box {\n    transition: transform 0.3s ease, opacity 0.3s ease;\n    will-change: transform; /* Hint for complex cases only */\n}\n.box:hover {\n    transform: translateX(100px) scaleX(1.5); /* GPU only, no layout */\n}\n\n/* Respect reduced motion:\n@media (prefers-reduced-motion: reduce) {\n    .box { transition: none; }\n}",
    "quick_fix": "Animate only transform and opacity — they run on the GPU compositor thread without triggering layout reflow; add will-change: transform only when animating",
    "severity": "medium",
    "effort": "medium",
    "created": "2026-03-15",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/css_animations",
        "html_url": "https://codeclaritylab.com/glossary/css_animations",
        "json_url": "https://codeclaritylab.com/glossary/css_animations.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[CSS Animations & Transitions](https://codeclaritylab.com/glossary/css_animations) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/css_animations"
            }
        }
    }
}