CSS @starting-style-ஐ கையாளுதல்: அனிமேஷன் தொடக்க நிலைகளை வரையறுத்தல்

வலை மேம்பாட்டின் மாறும் உலகில், பயனர் அனுபவத்தை மேம்படுத்துவதிலும், காட்சிப் பின்னூட்டத்தை வழங்குவதிலும், பயனர் தொடர்புகளை வழிநடத்துவதிலும் அனிமேஷன்கள் முக்கியப் பங்கு வகிக்கின்றன. CSS அனிமேஷன்கள் மற்றும் மாற்றங்கள் கணிசமாக வளர்ந்திருந்தாலும், ஒரு அனிமேஷனின் தொடக்க நிலையைத் துல்லியமாகக் கட்டுப்படுத்துவது, குறிப்பாக பயனர் தொடர்பு அல்லது நிலை மாற்றத்தால் தூண்டப்படும்போது, நுட்பமான சவால்களை அளிக்கிறது. @starting-style என்ற அட்-ரூல், இந்தச் சிக்கலை நேர்த்தியாகத் தீர்க்க வடிவமைக்கப்பட்ட ஒரு சக்திவாய்ந்த CSS அம்சமாகும்.

சவாலைப் புரிந்துகொள்ளுதல்: அனிமேஷனின் முதல் ஃபிரேம்

பாரம்பரியமாக, ஒரு எலிமென்டில் அனிமேஷன் அல்லது மாற்றம் பயன்படுத்தப்படும்போது, அதன் தொடக்க நிலை, அந்த அனிமேஷன்/மாற்றம் தொடங்கும் தருணத்தில் உள்ள தற்போதைய கணக்கிடப்பட்ட ஸ்டைல்களைப் பொறுத்தே தீர்மானிக்கப்படுகிறது. இது எதிர்பாராத காட்சித் தாவல்கள் அல்லது முரண்பாடுகளுக்கு வழிவகுக்கும், குறிப்பாக இது போன்ற சூழ்நிலைகளில்:

• பக்கங்களுக்கு இடையில் செல்லும்போது: ஒரு புதிய பக்கத்தில் ஒரு காம்போனென்ட் அனிமேட் ஆகும்போது, கவனமாகக் கையாளப்படாவிட்டால், அதன் தொடக்க ஸ்டைல்கள் நோக்கப்பட்டவற்றிலிருந்து வேறுபடலாம்.
• ஹோவர் அல்லது ஃபோகஸில் அனிமேஷன்களைத் தூண்டும்போது: அனிமேஷன் சீராகத் தொடங்கும் முன், எலிமென்ட் சுருக்கமாக மின்னும் அல்லது மாறும் ஸ்டைல்களைக் கொண்டிருக்கலாம்.
• ஜாவாஸ்கிரிப்ட் வழியாகப் பயன்படுத்தப்படும் அனிமேஷன்கள்: ஜாவாஸ்கிரிப்ட் ஒரு அனிமேஷனைத் தூண்டும் ஒரு கிளாஸை டைனமிக்காகச் சேர்த்தால், கிளாஸ் சேர்க்கப்படுவதற்குச் சற்று முன் உள்ள எலிமென்டின் நிலை, அனிமேஷனின் தொடக்கத்தைப் பாதிக்கிறது.
• display: none அல்லது visibility: hidden சம்பந்தப்பட்ட அனிமேஷன்கள்: ஆரம்பத்தில் ரெண்டர் செய்யப்படாத எலிமென்ட்கள், அவை தெரியும் வரை அனிமேஷன்களில் பங்கேற்க முடியாது, இது சீரான நுழைவுக்குப் பதிலாக திடீர் தோற்றத்திற்கு வழிவகுக்கிறது.

ஒரு எளிய உதாரணத்தைக் கவனியுங்கள்: ஒரு எலிமென்ட் மங்கித் தோன்றி பெரிதாக வேண்டும் என்று நீங்கள் விரும்புகிறீர்கள். அந்த எலிமென்ட் ஆரம்பத்தில் opacity: 0 மற்றும் transform: scale(0.5) கொண்டிருந்தால், பின்னர் opacity: 1 மற்றும் transform: scale(1) ஐ இலக்காகக் கொண்ட ஒரு CSS அனிமேஷன் பயன்படுத்தப்பட்டால், அனிமேஷன் அதன் தற்போதைய நிலையிலிருந்து (தெரியாத மற்றும் சிறிதாக்கப்பட்ட) தொடங்குகிறது. இது எதிர்பார்த்தபடி செயல்படுகிறது. ஆனால், அந்த எலிமென்ட் ஆரம்பத்தில் opacity: 1 மற்றும் transform: scale(1) கொண்டிருந்தால், பின்னர் opacity: 0 மற்றும் scale(0.5) இலிருந்து தொடங்க வேண்டிய அனிமேஷன் பயன்படுத்தப்பட்டால் என்ன செய்வது? @starting-style இல்லாமல், அனிமேஷன் எலிமென்டின் ஏற்கனவே உள்ள opacity: 1 மற்றும் scale(1) இலிருந்து தொடங்கும், இது நோக்கப்பட்ட தொடக்கப் புள்ளியைத் திறம்படத் தவிர்க்கிறது.

@starting-style அறிமுகம்: தீர்வு

@starting-style என்ற அட்-ரூல், ஒரு எலிமென்ட் முதல் முறையாக ஆவணத்தில் அறிமுகப்படுத்தப்படும்போது அல்லது ஒரு புதிய நிலைக்குள் நுழையும்போது, அதற்குக் கொடுக்கப்படும் CSS அனிமேஷன்கள் மற்றும் மாற்றங்களுக்கான ஆரம்ப மதிப்புகளை வரையறுக்க ஒரு அறிவிப்பு முறையை வழங்குகிறது. இது ஒரு அனிமேஷன் தொடங்கும் ஸ்டைல்களை, எலிமென்டின் உருவாக்கும் நேரத்தில் அல்லது ஒரு மாற்றம் தொடங்கும் நேரத்தில் உள்ள அதன் இயல்புநிலை ஸ்டைல்களைச் சாராமல் குறிப்பிட உங்களை அனுமதிக்கிறது.

இது பின்வருவனவற்றுடன் பயன்படுத்தப்படும்போது குறிப்பாக சக்தி வாய்ந்தது:

• @keyframes அனிமேஷன்கள்: 0% (அல்லது from) இல் தொடங்காத அனிமேஷன்களுக்கான தொடக்க நிலையை வரையறுத்தல்.
• CSS மாற்றங்கள்: மாற்றம் செய்யப்படாத நிலையிலிருந்து மாற்றத்தின் தொடக்கத்திற்கு ஒரு சீரான மாற்றத்தை உறுதி செய்தல்.

@starting-style @keyframes உடன் எப்படி வேலை செய்கிறது

நீங்கள் @starting-style-ஐ @keyframes அனிமேஷனுடன் பயன்படுத்தும்போது, அனிமேஷனின் முதல் கீஃப்ரேம் (பொதுவாக 0% அல்லது from கீஃப்ரேம்) செயல்படுவதற்கு *முன்* பயன்படுத்தப்பட வேண்டிய ஸ்டைல்களைக் குறிப்பிடலாம். இது 'தெரியாத' அல்லது 'சுருங்கிய' நிலையிலிருந்து தொடங்க வேண்டிய அனிமேஷன்களுக்கு மிகவும் பயனுள்ளதாக இருக்கும், ஆனால் எலிமென்ட் இயல்பாகவே தெரியும் ஸ்டைல்களுடன் ரெண்டர் செய்யப்பட்டிருக்கலாம்.

இதன் தொடரியல் நேரடியானது:

            
@keyframes fadeAndScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

.my-element {
  /* Other styles */
  animation: fadeAndScale 1s ease-out forwards;
}

@starting-style {
  opacity: 0;
  transform: scale(0.5);
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், .my-element மங்கி மறைந்து சுருங்க வேண்டும். அது ஆரம்பத்தில் opacity: 1 மற்றும் transform: scale(1) உடன் ரெண்டர் செய்யப்பட்டிருந்தால், from { opacity: 1; transform: scale(1); } இலிருந்து தொடங்கும் அனிமேஷன் உடனடி விளைவைக் காட்டும், ஏனெனில் அது ஏற்கனவே 'from' நிலையில் உள்ளது. இருப்பினும், @starting-style ஐப் பயன்படுத்துவதன் மூலம், உலவிக்கு நாம் வெளிப்படையாகக் கூறுகிறோம்:

• இந்த அனிமேஷன் தொடங்கும் போது, எலிமென்ட் opacity: 0 உடன் பார்வைக்குத் தயாராக இருக்க வேண்டும்.
• மற்றும் அதன் உருமாற்றம் scale(0.5) ஆக இருக்க வேண்டும்.

இது எலிமென்டின் இயல்பு நிலை வேறுபட்டிருந்தாலும், அனிமேஷன் குறிப்பிட்ட தொடக்க மதிப்புகளிலிருந்து அதன் வரிசையைச் சரியாகத் தொடங்குவதை உறுதி செய்கிறது. உலாவி இந்த @starting-style மதிப்புகளைத் திறம்படப் பயன்படுத்துகிறது, பின்னர் அந்த மதிப்புகளிலிருந்து from கீஃப்ரேமைத் தொடங்குகிறது, மற்றும் to கீஃப்ரேமிற்குத் தொடர்கிறது. அனிமேஷன் forwards என அமைக்கப்பட்டால், அனிமேஷன் முடிந்த பிறகு to கீஃப்ரேமின் இறுதி நிலை பராமரிக்கப்படுகிறது.

@starting-style மாற்றங்களுடன் எப்படி வேலை செய்கிறது

ஒரு CSS மாற்றம் ஒரு எலிமென்டில் பயன்படுத்தப்படும்போது, அது மாற்றம் நடப்பதற்கு *முன்* உள்ள எலிமென்டின் ஸ்டைல்களுக்கும் மாற்றம் நடந்த *பின்* உள்ள ஸ்டைல்களுக்கும் இடையில் சீராக மாறுகிறது. மாற்றத்தைத் தூண்டும் நிலை டைனமிக்காகச் சேர்க்கப்படும்போது, அல்லது ஒரு மாற்றம் எலிமென்டின் இயல்புநிலை ரெண்டர் செய்யப்பட்ட நிலை அல்லாத ஒரு குறிப்பிட்ட புள்ளியிலிருந்து தொடங்க வேண்டும் என நீங்கள் விரும்பும்போது சவால் எழுகிறது.

ஹோவர் செய்யும்போது பெரிதாகும் ஒரு பட்டனைக் கருத்தில் கொள்ளுங்கள். இயல்பாக, மாற்றம் பட்டனின் ஹோவர் செய்யப்படாத நிலையிலிருந்து ஹோவர் செய்யப்பட்ட நிலைக்குச் சீராக நகரும்.

            
.my-button {
  transition: transform 0.3s ease;
}

.my-button:hover {
  transform: scale(1.1);
}

            

              
                Copy
              
            
          

இது மிகச் சரியாக வேலை செய்கிறது. மாற்றம் பட்டனின் இயல்புநிலை transform: scale(1) இலிருந்து transform: scale(1.1) க்குத் தொடங்குகிறது.

இப்போது, உங்கள் பட்டன் பெரிதாகும் விளைவுடன் *உள்ளே* அனிமேட் ஆக வேண்டும், பின்னர், ஹோவர் செய்யும்போது *மேலும்* பெரிதாக வேண்டும் என்று கற்பனை செய்து பாருங்கள். பட்டன் ஆரம்பத்தில் அதன் முழு அளவில் தோன்றினால், ஹோவர் மாற்றம் நேரடியானது. ஆனால் பட்டன் மங்கித் தோன்றி பெரிதாகும் அனிமேஷனைப் பயன்படுத்தித் தோன்றினால், ஹோவர் விளைவும் அதன் *தற்போதைய* நிலையிலிருந்து சீராகப் பெரிதாக வேண்டும், அதன் அசல் நிலையிலிருந்து அல்ல என்பதை நீங்கள் விரும்பினால் என்ன செய்வது?

இங்குதான் @starting-style மதிப்புமிக்கதாகிறது. இது ஒரு மாற்றம் முதல் முறையாக ரெண்டர் செய்யப்படும் ஒரு எலிமென்டில் பயன்படுத்தப்படும்போது (எ.கா., ஒரு காம்போனென்ட் ஜாவாஸ்கிரிப்ட் வழியாக அல்லது ஒரு பக்க ஏற்றத்தின்போது DOM-க்குள் நுழையும்போது) அதன் தொடக்க நிலையை வரையறுக்க உங்களை அனுமதிக்கிறது.

ஒரு எலிமென்ட் மங்கித் தோன்றி பார்வைக்கு வர வேண்டும், பின்னர் ஹோவர் செய்யும்போது மேலும் பெரிதாக வேண்டும் என்று வைத்துக் கொள்வோம். நீங்கள் நுழைவுக்கு ஒரு அனிமேஷனையும், பின்னர் ஹோவர் விளைவுக்கு ஒரு மாற்றத்தையும் பயன்படுத்தலாம்:

            
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animated-card {
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInScale 0.5s ease-out forwards;
  transition: transform 0.3s ease;
}

.animated-card:hover {
  transform: scale(1.1);
}

/* Define the starting style for the initial entry animation */
@starting-style {
  opacity: 0;
  transform: scale(0.8);
}

            

              
                Copy
              
            
          

இந்தச் சூழ்நிலையில், @starting-style விதி, எலிமென்ட் opacity: 0 மற்றும் transform: scale(0.8) உடன் தனது ரெண்டரிங்கைத் தொடங்குவதை உறுதிசெய்கிறது, இது fadeInScale அனிமேஷனின் from கீஃப்ரேமுடன் பொருந்துகிறது. அனிமேஷன் முடிந்து, எலிமென்ட் opacity: 1 மற்றும் transform: scale(1) இல் நிலைபெற்றவுடன், ஹோவர் விளைவுக்கான மாற்றம் இந்த நிலையிலிருந்து transform: scale(1.1) க்குச் சீராக மாறுகிறது. இங்குள்ள @starting-style குறிப்பாக அனிமேஷனின் ஆரம்பப் பயன்பாட்டைப் பாதிக்கிறது, அது விரும்பிய காட்சிப் புள்ளியிலிருந்து தொடங்குவதை உறுதி செய்கிறது.

முக்கியமாக, @starting-style ஆவணத்தில் புதிதாகச் செருகப்பட்ட எலிமென்ட்களுக்குப் பயன்படுத்தப்படும் மாற்றங்களுக்குப் பொருந்தும். ஒரு எலிமென்ட் ஏற்கனவே இருந்து, அதன் ஸ்டைல்கள் ஒரு மாற்றப் பண்பைச் சேர்க்கும்படி மாறினால், @starting-style அந்த குறிப்பிட்ட மாற்றத்தின் தொடக்கத்தை நேரடியாகப் பாதிக்காது, அந்த எலிமென்ட் புதிதாக ரெண்டர் செய்யப்பட்டாலன்றி.

உலாவி ஆதரவு மற்றும் செயல்படுத்தல்

@starting-style அட்-ரூல் CSS விவரக்குறிப்புகளில் ஒப்பீட்டளவில் ஒரு புதிய সংযোজন. அதன் பரவலான பயன்பாட்டின்படி:

• Chrome மற்றும் Edge இல் சிறந்த ஆதரவு உள்ளது.
• Firefox இல் நல்ல ஆதரவு உள்ளது.
• Safari யிலும் நல்ல ஆதரவு வழங்கப்படுகிறது.

மிகவும் புதுப்பித்த உலாவி இணக்கத்தன்மை தகவல்களுக்கு Can I Use ஐச் சரிபார்ப்பது எப்போதும் அறிவுறுத்தப்படுகிறது. @starting-style ஐ ஆதரிக்காத உலாவிகளுக்கு, அனிமேஷன் அல்லது மாற்றம் வெறுமனே அழைக்கும் நேரத்தில் எலிமென்டின் தற்போதைய கணக்கிடப்பட்ட ஸ்டைல்களுக்குத் திரும்பும், இது முன்னர் விவரிக்கப்பட்ட விரும்பத்தகாத நடத்தைக்கு வழிவகுக்கும்.

சிறந்த நடைமுறைகள் மற்றும் மேம்பட்ட பயன்பாடு

1. நிலைத்தன்மை முக்கியம்

எலிமென்ட் DOM-இல் எவ்வாறு அறிமுகப்படுத்தப்பட்டாலும் அல்லது அதன் ஆரம்ப கணக்கிடப்பட்ட ஸ்டைல்கள் என்னவாக இருந்தாலும், அனிமேஷன்கள் மற்றும் மாற்றங்கள் சீராகத் தொடங்குவதை உறுதிசெய்ய @starting-style ஐப் பயன்படுத்தவும். இது மேலும் கணிக்கக்கூடிய மற்றும் மெருகூட்டப்பட்ட பயனர் அனுபவத்தை ஊக்குவிக்கிறது.

2. உங்கள் கீஃப்ரேம்களை ஒழுங்குபடுத்துங்கள்

ஒவ்வொரு அனிமேஷனுக்கும் தேவைப்படும் ஆரம்ப நிலையை (எ.கா., opacity: 0) from கீஃப்ரேமில் சேர்ப்பதற்குப் பதிலாக, அதை ஒருமுறை @starting-style இல் வரையறுக்கலாம். இது உங்கள் @keyframes விதிகளைச் சுத்தமாகவும், அனிமேஷனின் முக்கிய முன்னேற்றத்தில் அதிக கவனம் செலுத்துவதாகவும் ஆக்குகிறது.

3. சிக்கலான நிலை மாற்றங்களைக் கையாளுதல்

பல நிலை மாற்றங்கள் அல்லது அனிமேஷன்களுக்கு உள்ளாகும் காம்போனென்ட்களுக்கு, @starting-style எலிமென்ட்கள் சேர்க்கப்படும்போது அல்லது புதுப்பிக்கப்படும்போது அவற்றின் ஆரம்ப தோற்றத்தை நிர்வகிக்க உதவும். உதாரணமாக, ஒரு ஒற்றைப் பக்கப் பயன்பாட்டில் (SPA) காம்போனென்ட்கள் அடிக்கடி ஏற்றப்பட்டு இறக்கப்படும்போது, @starting-style உடன் ஒரு நுழைவு அனிமேஷனின் தொடக்க ஸ்டைலை வரையறுப்பது ஒரு சீரான தோற்றத்தை உறுதி செய்கிறது.

4. செயல்திறன் கருத்தாய்வுகள்

@starting-style தானாகவே செயல்திறனைப் பாதிக்காது என்றாலும், அது கட்டுப்படுத்தும் அனிமேஷன்கள் மற்றும் மாற்றங்கள் பாதிக்கின்றன. உலாவி திறமையாகக் கையாளக்கூடிய பண்புகளை, அதாவது transform மற்றும் opacity போன்றவற்றை அனிமேட் செய்ய எப்போதும் முயற்சி செய்யுங்கள். width, height, அல்லது margin போன்ற பண்புகளை அனிமேட் செய்வதைத் தவிர்க்கவும், ஏனெனில் இவை செலவுமிக்க லேஅவுட் மறு கணக்கீடுகளைத் தூண்டக்கூடும்.

5. பழைய உலாவிகளுக்கான மாற்று வழிகள்

@starting-style ஐ ஆதரிக்காத உலாவிகளில் உள்ள பயனர்களுக்கு ஒரு நியாயமான அனுபவத்தை உறுதிசெய்ய, நீங்கள் மாற்று ஸ்டைல்களை வழங்கலாம். இவை எலிமென்டின் இயல்பான ஆரம்ப ஸ்டைல்கள் ஆகும், அனிமேஷன் இல்லையெனில் இதிலிருந்து தொடங்கும். பல சந்தர்ப்பங்களில், அனிமேஷன் எளிமையாக இருந்தால் @starting-style இல்லாத இயல்புநிலை நடத்தை ஏற்றுக்கொள்ளத்தக்கதாக இருக்கலாம்.

மிகவும் சிக்கலான சூழ்நிலைகளுக்கு, உலாவி ஆதரவைக் கண்டறிய அல்லது குறிப்பிட்ட ஆரம்ப ஸ்டைல்களைப் பயன்படுத்த உங்களுக்கு ஜாவாஸ்கிரிப்ட் தேவைப்படலாம். இருப்பினும், @starting-style இன் குறிக்கோள் அத்தகைய ஜாவாஸ்கிரிப்ட் தலையீடுகளின் தேவையைக் குறைப்பதாகும்.

6. உலகளாவிய அணுகல் மற்றும் உள்ளூர்மயமாக்கல்

ஒரு உலகளாவிய பார்வையாளர்களுக்காக உருவாக்கும்போது, அனிமேஷன்கள் உள்ளடக்கியதாகவும், நாடு சார்ந்த காட்சி குறிப்புகளைச் சார்ந்து இருக்காமலும் இருக்க வேண்டும். @starting-style அட்-ரூல் ஒரு தொழில்நுட்ப CSS அம்சமாகும், இது கலாச்சாரச் சூழலிலிருந்து சுயாதீனமாகச் செயல்படுகிறது. அதன் மதிப்பு, கலாச்சார ரீதியாக உணர்திறன் வழிகளில் ஸ்டைல் செய்யப்பட்டுப் பயன்படுத்தக்கூடிய அனிமேஷன்களுக்கு ஒரு நிலையான தொழில்நுட்ப அடித்தளத்தை வழங்குவதில் உள்ளது. வெவ்வேறு சாதனங்கள் மற்றும் நெட்வொர்க் நிலைகளில் சீரான அனிமேஷன்களை உறுதி செய்வது வலை உருவாக்குநர்களின் உலகளாவிய இலக்காகும், மேலும் @starting-style அந்த நிலைத்தன்மையை அடைய உதவுகிறது.

எடுத்துக்காட்டு காட்சி: ஒரு போர்ட்ஃபோலியோ கார்டு அனிமேஷன்

ஒரு பொதுவான வலை வடிவமைப்பு முறையுடன் இதை விளக்குவோம்: ஒரு போர்ட்ஃபோலியோ கட்டம், இதில் ஒவ்வொரு கார்டும் ஒரு நுட்பமான தாமதம் மற்றும் ஒரு ஸ்கேலிங் விளைவுடன் பார்வைக்கு அனிமேட் ஆகிறது.

இலக்கு: ஒவ்வொரு கார்டும் மங்கித் தோன்றி, 0.9 இலிருந்து 1 க்குப் பெரிதாக வேண்டும், மேலும் கட்டத்தில் தோன்றும் ஒவ்வொரு கார்டுக்கும் ஒரு சிறிய தாமதம் பயன்படுத்தப்பட வேண்டும்.

HTML:

            
<div class="portfolio-grid">
  <div class="portfolio-item">Card 1</div>
  <div class="portfolio-item">Card 2</div>
  <div class="portfolio-item">Card 3</div>
  <div class="portfolio-item">Card 4</div>
</div>

            

              
                Copy
              
            
          

CSS:

            
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.portfolio-item {
  background-color: #f0f0f0;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2em;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  /* Default initial state */
  opacity: 0;
  transform: scale(0.9);

  /* Animation properties */
  animation: fadeInUpScale 0.6s ease-out forwards;
}

/* @keyframes for the animation */
@keyframes fadeInUpScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* @starting-style to define the initial state for the animation */
@starting-style {
  opacity: 0;
  transform: scale(0.9);
}

/* Applying delays to each item using :nth-child */
.portfolio-item:nth-child(1) {
  animation-delay: 0.1s;
}
.portfolio-item:nth-child(2) {
  animation-delay: 0.2s;
}
.portfolio-item:nth-child(3) {
  animation-delay: 0.3s;
}
.portfolio-item:nth-child(4) {
  animation-delay: 0.4s;
}

/* Adjusting keyframes to show the effect */
@keyframes fadeInUpScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

            

              
                Copy
              
            
          

விளக்கம்:

1. .portfolio-item எலிமென்ட்கள் ஆரம்பத்தில் opacity: 0 மற்றும் transform: scale(0.9) என அமைக்கப்பட்டுள்ளன. இது அனிமேஷன் பயன்படுத்தப்படுவதற்கு முந்தைய அவற்றின் நிலை.
2. @keyframes fadeInUpScale ஆனது அனிமேஷனை 0% (இது அனிமேஷன் முன்னேற்றத்திற்கான தொடக்க நிலையாகும்) இலிருந்து 100% வரை வரையறுக்கிறது.
3. @starting-style விதி, fadeInUpScale அனிமேஷன் பயன்படுத்தப்படும்போது, அது opacity: 0 மற்றும் transform: scale(0.9) உடன் தொடங்க வேண்டும் என்று வெளிப்படையாக அறிவிக்கிறது. இது இயல்புநிலை ஸ்டைல்கள் எப்படியாவது மாறினாலும், அனிமேஷன் இந்த வரையறுக்கப்பட்ட புள்ளியிலிருந்து தொடங்கும் என்பதை உறுதி செய்கிறது.
4. :nth-child தேர்வுகளைப் பயன்படுத்தி ஒவ்வொரு குழந்தைக்கும் animation-delay பண்பு பயன்படுத்தப்படுகிறது, இது கார்டுகளின் தோற்றத்தை ஒரு படிநிலையாக அமைத்து, மேலும் பார்வைக்கு ஈர்க்கும் வரிசையை உருவாக்குகிறது.
5. forwards என்ற முக்கியச்சொல், அனிமேஷன் முடிந்த பிறகு எலிமென்ட் கடைசி கீஃப்ரேமிலிருந்து ஸ்டைல்களைத் தக்கவைத்துக் கொள்வதை உறுதி செய்கிறது.

@starting-style இல்லாமல், உலாவி .portfolio-item இன் ஆரம்ப கணக்கிடப்பட்ட ஸ்டைல்களை அனிமேஷனின் தொடக்கப் புள்ளியாகச் சரியாகப் புரிந்து கொள்ளவில்லை என்றால், அனிமேஷன் வேறு, நோக்கம் இல்லாத நிலையிலிருந்து தொடங்கக்கூடும். @starting-style அனிமேஷன் நோக்கப்பட்ட மதிப்புகளிலிருந்து அதன் வரிசையைச் சரியாகத் தொடங்குவதற்கு உத்தரவாதம் அளிக்கிறது.

முடிவுரை

@starting-style அட்-ரூல் CSS அனிமேஷன்கள் மற்றும் மாற்றங்களில் ஒரு குறிப்பிடத்தக்க முன்னேற்றமாகும். இது டெவலப்பர்களுக்கு அனிமேட் செய்யப்பட்ட எலிமென்ட்களின் தொடக்க நிலைகள் மீது மேலும் துல்லியமான கட்டுப்பாட்டை அடைய அதிகாரம் அளிக்கிறது, இது மென்மையான, மேலும் கணிக்கக்கூடிய மற்றும் தொழில் ரீதியாக மெருகூட்டப்பட்ட பயனர் இடைமுகங்களுக்கு வழிவகுக்கிறது. @starting-style ஐப் புரிந்துகொண்டு செயல்படுத்துவதன் மூலம், உங்கள் வலை அனிமேஷன்களை நன்றிலிருந்து விதிவிலக்கானதாக உயர்த்தலாம், உங்கள் உலகளாவிய பார்வையாளர்களுக்கு பரந்த அளவிலான சாதனங்கள் மற்றும் உலாவிகளில் ஒரு நிலையான மற்றும் ஈர்க்கக்கூடிய அனுபவத்தை உறுதி செய்யலாம். பயனர்களை உண்மையிலேயே வசீகரிக்கும் அதிர்ச்சியூட்டும் அனிமேஷன் செய்யப்பட்ட வலை அனுபவங்களை உருவாக்க இந்த சக்திவாய்ந்த கருவியைப் பயன்படுத்துங்கள்.