# Keyframe Animations — CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

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

> Create multi-step animations with @keyframes and animate transform and opacity for smooth performance.

## @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.