CSS keyframe animation-கள் எப்படி வேலை செய்கின்றன?

Question

Accepted Answer

transition-கள் *இரண்டு நிலைகளுக்கு இடையே* animate செய்யும் அதே வேளையில், **`@keyframes` animation-கள்** தானாக இயங்கக்கூடிய, loop செய்யக்கூடிய, மற்றும் பல இடைநிலைகள் வழியே நகரக்கூடிய ஒரு பல-படி வரிசையை வரையறுக்கின்றன.

## ஒரு animation-ஐ வரையறுத்து பயன்படுத்துதல்

```css
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; } /* 0% */
  to   { transform: translateX(0);     opacity: 1; } /* 100% */
}

.panel {
  animation: slide-in 0.5s ease-out;
}
```

## சதவீதங்களுடன் பல-படி keyframes

```css
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); } /* peak of the bounce */
  100% { transform: translateY(0); }
}
```

சதவீதங்கள் ஒரே animation-இல் பல நிலைகளை choreograph செய்ய உங்களை அனுமதிக்கின்றன — ஒரு எளிய transition-உடன் இது சாத்தியமில்லை.

## முழுமையான animation சுருக்கெழுத்து

```css
.spinner {
  animation: spin 1s linear infinite;
  /*         │    │    │      └── iteration-count (infinite = loop forever) */
  /*         │    │    └───────── timing function */
  /*         │    └────────────── duration */
  /*         └─────────────────── @keyframes name */
}
@keyframes spin { to { transform: rotate(360deg); } } /* classic loading spinner */
```

பிற property-கள்: `animation-delay`, `animation-direction: alternate` (ping-pong), `animation-fill-mode: forwards` (இறுதி நிலையை வைத்திருத்தல்), `animation-play-state: paused`.

## செயல்திறன் — transform/opacity-ஐ மட்டுமே animate செய்யுங்கள்

```css
/* ✅ GPU-composited, 60fps */
@keyframes good { to { transform: scale(1.1); opacity: 0.5; } }
/* ❌ animating width/height/top forces layout every frame → jank */
@keyframes bad  { to { width: 300px; top: 50px; } }
```

Keyframe animation-கள் ஒவ்வொரு frame-லும் இயங்குகின்றன, எனவே layout-ஐத் தூண்டும் property-களை animate செய்வது `transform`/`opacity`-ஐ animate செய்வதை விட மிகவும் செலவாகும்.

## அணுகல்தன்மை (Accessibility)

```css
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; } /* honor users sensitive to motion */
}
```

## இது ஏன் முக்கியம்

Keyframe animation-கள் loader-கள், கவன குறிப்புகள், entrance-கள், மற்றும் transition-களால் வெளிப்படுத்த முடியாத (பல-படி, தானாக இயங்கும், infinite) loop விளைவுகளுக்கு சக்தியளிக்கின்றன.

சுருக்கெழுத்தை அறிந்துகொள்வது, மென்மைக்காக `transform`/`opacity`-ஐ பின்பற்றுவது, மற்றும் `prefers-reduced-motion`-ஐ மதிப்பது — செயல்திறன்மிக்கதாகவும் அணுகக்கூடியதாகவும் இருக்கும் வளமான motion-ஐ உருவாக்க உங்களை அனுமதிக்கிறது.