CSS பரிவர்தனைகள் எவ்வாறு செயல்படுகின்றன?

Question

Accepted Answer

**பரிவர்தனை** ஒரு சொத்தை அதன் பழைய மதிப்பிலிருந்து புதிய மதிப்புக்கு சிறிது சிறிதாக உயிரூட்டுகிறது, உடனடியாக மாற்றுவதற்குப் பதிலாக। நீங்கள் என்ன உயிரூட்ட வேண்டும் மற்றும் எவ்வளவு நேரம் என்பதை அறிக்கையிடுகிறீர்கள், பிறகு சொத்தை மாற்றுவதன் மூலம் அதைத் தூண்டுகிறீர்கள் (பெரும்பாலும் `:hover` அல்லது வகுப்பு மூலம்).

```css
.button {
  background: blue;
  transition: background 0.3s ease;  /* animate background over 300ms */
}
.button:hover {
  background: darkblue;  /* on hover, it fades smoothly instead of snapping */
}
```

## சுருக்கத்தின் நான்கு பகுதிகள்

```css
transition: background 0.3s ease 0s;
/*          │          │    │    └── delay before starting */
/*          │          │    └─────── timing function (the easing curve) */
/*          │          └──────────── duration */
/*          └─────────────────────── property to animate (or `all`) */
```

## பல சொத்துக்களை உயிரூட்டுதல்

```css
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);          /* lifts up */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* + deeper shadow */
}
```

ஒவ்வொரு சொத்தையும் (கமா-பிரிக்கப்பட்ட) பட்டியலிடுங்கள், `all` ஐப் பயன்படுத்துவதற்குப் பதிலாக, இது நீங்கள் எண்ணாத விஷயங்களை தற்செயலாக உயிரூட்டலாம் மற்றும் செயல்திறனைக் கெடுக்கலாம்.

## நேரச் செயல்பாடுகள்

```css
transition-timing-function: ease;        /* slow-fast-slow (default) */
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* custom curve */
```

## செயல்திறன்: transform/opacity ஐ உயிரூட்டுதல்

```css
/* ✅ cheap — GPU-composited, no layout recalculation */
transition: transform 0.3s, opacity 0.3s;
/* ❌ expensive — animating width/top/left triggers layout on every frame */
transition: width 0.3s, left 0.3s;
```

`transform` மற்றும் `opacity` ஐ உயிரூட்ட விரும்பவும்; அவை தளவமைப்பை மீண்டும் இயக்காமல் கூட்டு மூலம் கைப்பற்றப்படுகின்றன, எனவே அவை மென்மையாக இருக்கின்றன (60 fps).

## அணுகல்தன்மை

```css
@media (prefers-reduced-motion: reduce) {
  * { transition: none; } /* respect users who get motion sickness */
}
```

## இது ஏன் முக்கியமாக உள்ளது

பரிவர்தனைகள் பயனர் இடைமுக ஐ வ்யth்थಾನಿಯ ಮತ್ತು ಜೀವನ್ತಿಗೆ ಅನುভವ ಮಾಡುತ್ತವೆ (hover ಪರಿಣಾಮಗಳು, ಮಸೃಣ ಸ್ಥಿತಿ ಬದಲಾವಣೆಗಳು) ಕೇವಲ ಒಂದು ಸಾಲಿನೊಂದಿಗೆ ರಿಫೈನ್ಮೆಂಟ್ ಸೃಷ್ಟಿ ಮಾಡುತ್ತವೆ.

`transform`/`opacity` ಅನ್ನು ಅದೋಚ್ರಿತಕ್ಕೆ ಸಂಚಿಸಬೇಕು ಮತ್ತು `prefers-reduced-motion` ಗಳನ್ನು ಆದರ್ಶಪಡಿಸುವುದು — ಮೃದುಲನಾ, ಪ್ರವೇಶಯೋಗ್ಯ ಚಲನೆಯನ್ನು ಜಾರಜಾರ ಆನಿಮೇಶನೀಕರಣದಿಂದ ಪ್ರತ್ಯೇಕಿಸುವುದು.