# Keyframe Animations — CSS

Source: https://www.geekswithgeeks.com/en/css/css-animations

> Multi-step animations that run automatically, with @keyframes.

## @keyframes + animation

`@keyframes name { 0% {...} 100% {...} }` defines the steps; `animation: name duration timing-function` plays it. Unlike `transition`, it can loop and doesn't need a trigger like `:hover`.

## A spinning loader

`infinite` repeats the animation forever; `linear` gives constant speed.

```css
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.loader {
  animation: spin 1s linear infinite;
}
```

## Animate cheap properties

Stick to animating `transform` and `opacity` — they run on the GPU. Animating `width`, `height`, or `top`/`left` forces the browser to recalculate layout on every frame, which can feel janky.