# कीफ्रेम एनिमेशन — सीएसएस

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

> @keyframes के साथ बहु-चरण एनिमेशन जो अपने-आप चलते हैं।

## @keyframes + animation

`@keyframes name { 0% {...} 100% {...} }` चरण परिभाषित करता है; `animation: name duration timing-function` उसे चलाता है। `transition` के विपरीत, यह लूप हो सकता है और इसे `:hover` जैसे ट्रिगर की ज़रूरत नहीं।

## घूमता हुआ लोडर

`infinite` एनिमेशन को हमेशा दोहराता है; `linear` स्थिर गति देता है।

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

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

## सस्ती प्रॉपर्टी एनिमेट करें

`transform` और `opacity` को एनिमेट करने तक सीमित रहें — वे GPU पर चलते हैं। `width`, `height`, या `top`/`left` एनिमेट करना ब्राउज़र को हर फ्रेम में लेआउट दोबारा गणना करने पर मजबूर करता है, जो अटका हुआ महसूस हो सकता है।