कीफ्रेम एनिमेशन

@keyframes + animation

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

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

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

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

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

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

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