பல-படி அனிமேஷன்கள் மற்றும் மாற்றங்களை எவ்வாறு பயன்படுத்துவது?

இந்தக் கட்டுரை பல-படி அனிமேஷன்கள் மற்றும் மாற்றங்களைச் சேர்க்கும் செயல்முறையை விளக்குகிறது.

பல-படி அனிமேஷன்கள் மற்றும் மாற்றங்களை எவ்வாறு பயன்படுத்துவது?

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

சிறந்த புரிதலுக்கு ஒரு நடைமுறை உதாரணம் மூலம் நடப்போம்:

எடுத்துக்காட்டு 1: பல-படி அனிமேஷனைப் பயன்படுத்துதல்
இந்த எடுத்துக்காட்டில், தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புக்கு பலபடி அனிமேஷன் பயன்படுத்தப்படும். கீழே உள்ள ஆர்ப்பாட்டத்தைப் பார்வையிடவும்:

மேலே உள்ள குறியீடு துணுக்கில்:

• முதலில், வகுப்பு ' அனிமேஷன் உதாரணம் '' உள்ளே தேர்ந்தெடுக்கப்பட்டது <பாணி> ” குறிச்சொல்.
• அடுத்து, 'இன் மதிப்புகள் 130px ''க்கு ஒதுக்கப்பட்டுள்ளது உயரம் 'மற்றும்' அகலம் 'பண்புகள்.
• கூடுதலாக, அமைக்கவும் ' காடுபச்சை 'மற்றும்' உறவினர் ''க்கான மதிப்பாக பின்னணி நிறம் 'மற்றும்' நிலை காட்சிப்படுத்தலை மேம்படுத்தும் பண்புகள்.
• அதன் பிறகு, பயன்படுத்தவும் ' இயங்குபடம் 'சொத்து மற்றும் அதை சமமாக அமைக்கவும்' மூவ்-அனிமேட் 4s-ஐ எண்ணற்ற முறையில் எளிதாக்குகிறது ” அனிமேஷன்களைப் பயன்படுத்த.
• மதிப்பு நான்கு பகுதிகளைக் கொண்டுள்ளது, முதலாவது தனிப்பயன் பெயர் அனிமேஷன், இரண்டாவது முடிக்க வேண்டிய நேரம், மூன்றாவது அனிமேஷன் வகை மற்றும் நான்காவது இந்த அனிமேஷன் எத்தனை முறை பயன்படுத்தப் போகிறது என்பதற்கான வரம்பு.
• முடிவில், ஒரு HTML உறுப்பை உருவாக்கி, ' அனிமேஷன் உதாரணம் ” அதற்கு வகுப்பு.

இப்போது, ​​பயன்படுத்தவும் ' கீஃப்ரேம்கள் 'வழக்கத்தை வரையறுக்க விதி' அசைவு ' இயங்குபடம்:

மேலே உள்ள குறியீடு தொகுதியில்:

• முதலில், ' @keyframes 'பிளாக் என்பது தனிப்பயன் அனிமேஷனின் பெயருடன் உருவாக்கப்பட்டது, இது வரையறுக்கப்பட உள்ளது.
• அடுத்து, ' என்ற பெயரில் ஒரு தொகுதியை உருவாக்கவும் 0% ” இது அனிமேஷனின் தொடக்கத்தில் CSS பாணிகளைப் பயன்படுத்துகிறது. மற்றும் பயன்படுத்தவும் ' பின்னணி நிறம் 'மற்றும்' விட்டு ” CSS பண்புகள்.
• இப்போது, ​​பெயரிடப்பட்ட ஒரு தொகுதியை உருவாக்கவும் மற்றும் ' ஐம்பது% ” அனிமேஷனின் நடுவில் ஸ்டைல் ​​செய்ய. இது மதிப்புகளை வழங்குகிறது ' 200px ”,” காடுபச்சை 'மற்றும்' சுழற்று (180 டிகிரி) 'இடது', 'பின்னணி-வண்ணம்' மற்றும் 'மாற்றம்' பண்புகளுக்கு. இது தேர்ந்தெடுக்கப்பட்ட உறுப்பு இடது 200px சுழற்ற அனுமதிக்கிறது.

மேலே உள்ள குறியீடு தொகுதியை தொகுத்த பிறகு:

தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புக்கு பல-படி அனிமேஷன் பயன்படுத்தப்பட்டதை வெளியீடு காட்டுகிறது.

எடுத்துக்காட்டு 2: பல-படி மாற்றத்தைப் பயன்படுத்துதல்
மல்டிஸ்டெப் மாற்றத்தைப் பயன்படுத்த, CSS தேர்வாளர்களை ' மாற்றம் ”சொத்து. கீழே உள்ள குறியீட்டைப் பார்வையிடவும்:

மேலே உள்ள குறியீட்டின் விளக்கம்:

• முதலில், வழக்கம்' மங்கிவிடும் 'வகுப்பு தேர்ந்தெடுக்கப்பட்டது மற்றும் 1 இன் மதிப்பு ' ஒளிபுகாநிலை ”சொத்து. மேலும், 'இன் மதிப்பை அமைக்கவும் ஒளிபுகாநிலை 1வி 'க்கு' மாற்றம் ” CSS சொத்து. இது ஒரு நேரத்தில் ஒளிபுகாநிலையை அமைக்கிறது அல்லது நீக்குகிறது ' 1வி ”.
• அடுத்து, ' : மிதவை 'தேர்வாளர்' க்கு ஒதுக்கப்பட்டுள்ளார் மங்கிவிடும் ' வர்க்கம். அதில், மதிப்பு 0 ” என்பது ஒளிபுகா பண்புக்கு அமைக்கப்பட்டுள்ளது.
• இறுதியில், HTML உறுப்பு உள்ளே உருவாக்கப்படுகிறது ' <உடல்> 'குறிச்சொல் மற்றும் வகுப்பு' மங்கிவிடும் ” என்று இணைக்கப்பட்டுள்ளது.

தொகுத்தல் கட்டத்தின் முடிவில், வலைப்பக்கம் இப்படித் தோன்றும்:

தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புக்கு தனிப்பயன் மங்கல் மாற்றம் பயன்படுத்தப்பட்டதை GIF காட்டுகிறது.

முடிவுரை

பல-படி அனிமேஷன்கள் மற்றும் மாற்றங்கள் இயக்கம் மற்றும் காட்சி விளைவுகளைச் சேர்ப்பதன் மூலம் HTML வலைப்பக்கங்களுக்கு உயிர் கொடுக்கின்றன. அனிமேஷனுக்காக, ' கீஃப்ரேம்கள் '' போன்ற கால சதவீதத்துடன் பயன்படுத்தப்படுகிறது 0% 'இது ஆரம்பம்,' ஐம்பது% ” என்பது நடு, மற்றும் “ 100% ” என்பது அனிமேஷன் காலத்தின் முடிவு. மாற்றத்திற்கு, CSS தேர்வியை '' உடன் பயன்படுத்தலாம் மாற்றம் ' வர்க்கம். இந்த கட்டுரை பல-படி அனிமேஷன் மற்றும் மாற்றங்களைப் பயன்படுத்தும் செயல்முறையை நிரூபித்துள்ளது.