CSS Transitions

      A transition makes a change happen gradually instead of instantly.
      
      Without transitions:
      - UI feels sharp and cheap
      
      With transitions:
      - UI feels professional
      
      ## The 4 parts of transition
      - property (what changes)
      - duration (how long)
      - timing function (how it speeds)
      - delay (optional)
      
      ## Example: button hover
      HTML:
      ```html
      <button class="btn">Save</button>
      ```
      
      CSS:
      ```css
      .btn {
        padding: 10px 14px;
        border: 1px solid #444;
        background: white;
        transition: background 0.2s ease, color 0.2s ease;
      }
      
      .btn:hover {
        background: #222;
        color: white;
      }
      ```
      
      ## UI imagination
      Button becomes dark smoothly, text turns white smoothly.
      
      ## Common beginner mistake
      Using transition but changing a property that cannot animate well.
      Good properties:
      - opacity
      - transform
      - color
      - background-color
      
      ## Graph: instant vs transition
      ```mermaid
      flowchart LR
        A[Hover change] --> B[Instant = harsh]
        A --> C[Transition = smooth]
      ```
      
      ## Remember
      - Use transitions for hover, focus, dropdown feel
      - Prefer transform and opacity for best performance