# CSS Transforms & Animation Reference Notes

# Transform Properties

## Traditional Chained Transforms

```css
.element {
  transform: translateY(10px) rotate(45deg) scale(1.2);
  transform-origin: center; /* or specific coordinates like 12px 7px */
}
```

## Individual Transform Properties

```css
.element {
  translate: 10px 20px; /* x y values */
  rotate: 45deg;
  scale: 1.2; /* or 1.2 1.5 for x y */
  transform-origin: 12px 7px;
}
```

**Key Difference**: Individual properties don't cascade coordinate systems!

# Transform-Origin Deep Dive

## The Coordinate System Rule

* `transform-origin` uses the **same coordinate system** as your SVG/element
    
* For SVG lines: use the actual `x1, y1, x2, y2` coordinate values
    
* Not some separate CSS coordinate system
    

## Examples

```svg
<!-- SVG with viewBox="0 0 24 24" -->
<line x1="4" y1="7" x2="20" y2="7" />   <!-- Top line -->
<line x1="4" y1="12" x2="20" y2="12" /> <!-- Middle line -->
<line x1="4" y1="17" x2="20" y2="17" /> <!-- Bottom line -->
```

```css
.top-line {
  transform-origin: 12px 7px; /* SVG center-x, line's actual y */
}
.middle-line {
  transform-origin: 12px 12px; /* SVG center-x, line's actual y */
}
.bottom-line {
  transform-origin: 12px 17px; /* SVG center-x, line's actual y */
}
```

**Result**: All lines rotate around the visual center (12,12) of the SVG

## Chained Transform Gotcha

```css
/* ❌ Confusing -> coordinate system shifts */
.element {
  transform: translateY(5px) rotate(45deg);
  transform-origin: 12px 7px; /* Must account for the translate! */
}

/* ✅ Intuitive -> no coordinate cascading */
.element {
  translate: 0 5px;
  rotate: 45deg;
  transform-origin: 12px 12px; /* Works as expected */
}
```

# Sequenced Animations

## Using Transitions with Individual Properties

```css
.element {
  transition-property: translate, rotate;
  transition-duration: 0.2s, 0.2s;
  transition-delay: 0s, 0.2s; /* translate first, then rotate */
}

.element.active {
  translate: 0 5px;
  rotate: 45deg;
  transition-delay: 0.2s, 0s; /* reverse: rotate first, then translate */
}
```

## Using Keyframes (Often Cleaner)

```css
@keyframes open-animation {
  40% {
    translate: 0 5px;
  } /* move first */
  100% {
    translate: 0 5px;
    rotate: 45deg;
  } /* then rotate */
}

@keyframes close-animation {
  0% {
    translate: 0 5px;
    rotate: 45deg;
  }
  60% {
    translate: 0 5px;
  } /* rotate back first */
  100% {
    translate: 0 0;
  } /* then move back */
}
```

# CSS Attribute Selectors

## State-Based Styling

```css
/* Target elements by attribute values */
button[aria-pressed="true"] .icon {
  rotate: 180deg;
}

input[type="email"] {
  border: 2px solid blue;
}

div[data-state="loading"] {
  opacity: 0.5;
}
```

## Common Patterns

```css
[hidden] {
  display: none;
}
[disabled] {
  opacity: 0.5;
}
[aria-expanded="true"] .chevron {
  rotate: 180deg;
}
```

# Common Patterns

## Burger Menu Animation

```css
.burger-line {
  transition-property: translate, rotate;
  transition-duration: 0.3s;
  transition-delay: 0.15s, 0s; /* for closing: rotate first, then translate */
}

.burger.open .top-line {
  translate: 0 5px;
  rotate: 45deg;
  transition-delay: 0s, 0.15s; /* for opening: translate first, then rotate */
  transform-origin: 12px 7px; /* where the line actually sits */
}

.burger.open .bottom-line {
  translate: 0 -5px;
  rotate: -45deg;
  transition-delay: 0s, 0.15s;
  transform-origin: 12px 17px; /* where the line actually sits */
}
```

## Hover Effects

```css
.card {
  translate: 0 0;
  scale: 1;
  transition: translate 0.2s, scale 0.2s;
}

.card:hover {
  translate: 0 -4px;
  scale: 1.02;
}
```

# Pro Tips

1. **Individual properties are usually cleaner** for complex animations
    
2. **Transform-origin coordinates match your SVG/element coordinates** -&gt; not CSS pixels
    
3. **Keyframes give you full control** over sequenced animations
    
4. **Attribute selectors are powerful** for state-based styling
    
5. **Always test both directions** of your animations (open/close, hover/unhover)