HTML மொழி வலைப்பக்கத்தின் கட்டமைப்பை வழங்குகிறது, மேலும் CSS அந்த பயன்பாட்டின் வடிவமைப்பு மற்றும் வடிவமைப்பை வழங்குகிறது. நிலையான கூறுகளுடன் ஒப்பிடும்போது அனிமேஷன் செய்யப்பட்ட கூறுகள் மிகவும் கவர்ச்சிகரமானதாக இருப்பதால், இந்த கலவையானது அனிமேஷனைச் சேர்க்க உங்களை அனுமதிக்கிறது. இது ஒரு உறுப்பு அதன் பாணியை படிப்படியாக மாற்ற அனுமதிக்கிறது.
கூறுகளுக்கு அனிமேஷனை எவ்வாறு பயன்படுத்துவது என்பதை இந்தக் கட்டுரை வழிகாட்டும். எனவே, தொடங்குவோம்!
CSS அனிமேஷன் கீஃப்ரேம்கள் என்றால் என்ன?
அனிமேஷனை முடிக்க, அனிமேஷனை HTML உறுப்புடன் பிணைக்க வேண்டும். இந்த நோக்கத்திற்காக, முக்கிய சொல்லைப் பயன்படுத்தவும் ' @keyframes ” என்ற அனிமேஷன் பெயரைத் தொடர்ந்து. இந்த கூறு அனிமேஷனின் தொடக்கத்தையும் முடிவையும் குறிப்பிடுகிறது.
CSS அனிமேஷன் கீஃப்ரேம்களை எவ்வாறு அமைப்பது?
CSS இல் அனிமேஷன் கீஃப்ரேம்களை அமைக்க, நாம் இரண்டு எடுத்துக்காட்டுகளைப் பார்ப்போம்.
எடுத்துக்காட்டு 1
CSS இல் அனிமேஷன் கீஃப்ரேம்களை அமைக்க, பின்வரும் படிகளைச் செய்யவும்:
-
- வகுப்பின் பெயரைக் கொண்ட ஐச் சேர்க்கவும். முக்கிய பகுதி ”.
- div இன் உள்ளே, வகுப்பின் பெயருடன் மற்றொரு div ஐ சேர்க்கவும். img-பெங் ”.
- இந்த img-peng div இன் உள்ளே, படத்தை வைக்க
ஐ சேர்க்கவும். இந்த குறிச்சொல்லில் மூன்று பண்புக்கூறுகள் உள்ளன, ' src 'படப் பாதையை வழங்குவதற்கான பண்பு,' எல்லாம் ” என்பது படம் காட்டப்படாவிட்டால் சேர்க்கப்படும் மாற்று உரை, மேலும் “ அகலம் படத்தின் அகலத்தை வழங்குவதற்கான பண்புக்கூறு.
HTML
< div வர்க்கம் = 'முக்கிய பகுதி' >
< div வர்க்கம் = 'img-பெங்' >
< img src = 'images/penguin.png' எல்லாம் = 'பெங்குவின்' அகலம் = '100' >
div >
div >
.main-div {
CSS
அகலம்: 90 % ;
உயரம்: 90px;
பின்னணி நிறம்: rgb ( 67 , 66 , 87 ) ;
விளிம்பு: 20px தானியங்கு;
திணிப்பு: 10px;
}
CSS இல், ' .main-div 'டிவி வகுப்பை அணுக சேர்க்கப்பட்டது. இதற்குப் பயன்படுத்தப்படும் பண்புகள் கீழே விவரிக்கப்பட்டுள்ளன:-
- ' அகலம் 'சொத்து மதிப்பு div இன் அகலத்தை வரையறுக்கிறது.
- ' உயரம் 'டிவ் உயரத்தை அமைக்க சொத்து பயன்படுத்தப்படுகிறது.
- ' பின்னணி நிறம் 'சொத்து உறுப்பின் பின்னணியில் வண்ணத்தைப் பயன்படுத்துகிறது.
- ' விளிம்பு ” என அமைக்கப்பட்டுள்ளது 20px கார் ”, இது மேலிருந்து கீழாக உள்ள இடத்தைக் குறிக்கிறது, மேலும் ஆட்டோ என்பது இடது மற்றும் வலதுபுறத்தில் இருந்து சமமான இடத்தைக் குறிக்கிறது.
- ' திணிப்பு 'சொத்து மதிப்பு 10px ஆக ஒதுக்கப்பட்டுள்ளது, இது உறுப்பு உள்ளடக்கத்தைச் சுற்றி இடத்தைப் பயன்படுத்துகிறது.
உடை img-பெங் வகுப்பு
.img-பெங் {
அகலம்: 50px;
உயரம்: 100px;
நிலை: உறவினர்;
அனிமேஷன்: குலுக்கல்;
அனிமேஷன்-காலம்: 2வி;
அனிமேஷன்-டைமிங் செயல்பாடு: 2வி;
அனிமேஷன்-மறுபடி-எண்ணிக்கை: எல்லையற்றது;
}
' .img-பெங் ” மேலே உள்ள HTML கோப்பில் குறிப்பிடப்பட்டுள்ள div வகுப்பை அணுக பயன்படுகிறது. இந்த div உறுப்பு கீழே விவாதிக்கப்படும் பண்புகளுடன் வடிவமைக்கப்பட்டுள்ளது:-
- ' அகலம் உறுப்பின் அகலத்தை அமைக்க சொத்து மதிப்பு பயன்படுத்தப்படுகிறது.
- ' உயரம் 'சொத்து மதிப்பு உறுப்பு உயரத்தை அமைக்க பயன்படுத்தப்படுகிறது.
- ' நிலை 'சொத்து மதிப்பு ஒதுக்கப்பட்டுள்ளது' உறவினர் ”, அதாவது அதன் இயல்பான நிலைக்கு ஒப்பாக அது நிலைநிறுத்தப்படும்.
- ' இயங்குபடம் 'பெயர்' என வழங்கப்படுகிறது குலுக்கல் ”. இருப்பினும், தேவைக்கேற்ப அனிமேஷனுக்கு நீங்கள் பெயரிடலாம்.
- ' அனிமேஷன்-காலம் ” என்பது அனிமேஷனின் கால அளவைக் குறிக்கிறது, இது 2 வினாடிகள்.
- ' அனிமேஷன்-நேர செயல்பாடு ” க்கு 2 வினாடிகளில் மதிப்பு ஒதுக்கப்பட்டுள்ளது, அதாவது 2 வினாடிகளில் அனிமேஷன் நிறைவடையும்.
- ' அனிமேஷன்-மறுபடி-எண்ணிக்கை ” என்பது எல்லையற்றதாக அமைக்கப்பட்டுள்ளது, அதாவது இந்த அனிமேஷன் எல்லையற்ற நேரத்தில் நிகழும்.
முக்கிய வார்த்தைகளுடன் @keyframes ஐ வரையறுக்கவும்
@ கீஃப்ரேம்கள் அசைகின்றன {
இருந்து {
மேல்: 50px;
}
செய்ய {
விளிம்பு-கீழ்: 200px;
}
}
படத்தில் அமைக்கப்பட்ட அனிமேஷன் கீஃப்ரேம்களின் விளக்கம் கீழே பட்டியலிடப்பட்டுள்ளது:-
- ' @keyframes குலுக்கல் ” என்பது அனிமேஷன் பெயரைக் குறிக்கும் ஷேக்கைத் தொடர்ந்து @keyframes என்ற முக்கிய சொல்லாகும். இந்த விதிக்குள், அனிமேஷனின் நடத்தை குறிப்பிடப்பட்டுள்ளது.
- அதன் சுருள் அடைப்புக்குறிக்குள், ' இருந்து 'மற்றும்' செய்ய ” முக்கிய வார்த்தைகள் அனிமேஷன் நடத்தையை வரையறுக்க வெவ்வேறு இடைவெளிகளைக் குறிப்பிடுகின்றன.
- ' மேல் ”பண்புக்கு 50px இன் மதிப்பு ஒதுக்கப்பட்டுள்ளது, அதாவது அனிமேஷன் திரையின் மேலிருந்து 50px இலிருந்து தொடங்கி கீழே 200px வரை தொடர்கிறது.
இதன் விளைவாக, பின்வரும் வெளியீட்டைக் காண்பீர்கள்:
இப்போது, அனிமேஷன் வெவ்வேறு இடைவெளிகளில் வித்தியாசமாக செயல்படட்டும். அவ்வாறு செய்ய, @keyframes இல் உள்ள அனிமேஷன் சதவீதங்களைப் பயன்படுத்தவும்.@keyframes சதவீதங்களுடன் குறிப்பிடவும்
@ கீஃப்ரேம்கள் அசைகின்றன {
0 % {
விட்டு: -50px ;
}
25 % {
இடது: 50px;
}
ஐம்பது % {
விட்டு: -25px ;
}
75 % {
இடது: 25px;
}
100 % {
இடது: 10px;
}
}
எனவே, மேலே உள்ள குறியீடு துணுக்கின் விளக்கம் இங்கே குறிப்பிடப்பட்டுள்ளது:-
- 0%, 25%, 50%, 75% மற்றும் 100% சதவீத மதிப்புகள் வெவ்வேறு இடைவெளிகளில் அனிமேஷனைக் குறிக்கின்றன.
- மேலும், 0% இல், படத்தின் இடதுபுறத்தில் உள்ள இடம் ' -50px ”. 25% இல், இடப்பக்க இடம் ' 50px ”. 50% இல், இடப்பக்க இடம் ' -25px ”. 75% இல், இடது இடம் ' 25px ', மற்றும் அனிமேஷன் முடிந்ததும் (100%), இடது இடம் ' 10px ”.
மேலே உள்ள குறியீடு பின்வரும் அனிமேஷனைக் காட்டுகிறது:
படங்களுக்கு அனிமேஷன்களை எவ்வாறு அமைக்கலாம் என்பதைப் பார்க்க மற்றொரு உதாரணத்தை எடுத்துக்கொள்வோம்.உதாரணம் 2
HTML இல், வகுப்பின் பெயரைக் கொண்ட
ஐச் சேர்க்கவும். முக்கிய பக்கம் ”. இந்தஉறுப்புக்குள், வகுப்புகளுடன் மேலும் இரண்டு div குறிச்சொற்களை வைக்கவும் மேகம்1 'மற்றும்' மேகம்2 ', முறையே.HTML
< div வர்க்கம் = 'முதன்மை பக்கம்' >
< div வர்க்கம் = 'மேகம்1' > div >
< div வர்க்கம் = 'மேகம்2' > div >
div >
உடல் {
CSS
விளிம்பு: 0 ;
திணிப்பு: 0 ;
}
CSS இல், பின்வரும் CSS பண்புகளை உடல் உறுப்புக்கு ஒதுக்குவோம்:-
- ' விளிம்பு ” 0 ஆக உள்ள பண்பு உறுப்பைச் சுற்றி இடம் இல்லை என்பதைக் குறிப்பிடுகிறது.
- ' திணிப்பு ”மதிப்பு 0 கொண்ட சொத்து, உறுப்பு உள்ளடக்கத்தைச் சுற்றி எந்த இடத்தையும் குறிப்பிடவில்லை.
உடை முதன்மைப் பக்கம் div
.முக்கிய பக்கம் {
பின்னணி படம்: url ( / படங்கள் / wolf-night.png ) ;
பின்னணி-மீண்டும்: இல்லை-மீண்டும்;
பின்னணி அளவு: கவர்;
உயரம்: 100vh;
நிலை: உறவினர்;
வழிதல் மறைத்து;
}
இங்கே:-
- ' .முக்கிய பக்கம் 'டிவி வகுப்பை அணுக பயன்படுகிறது.
- ' பின்னணி படம் 'சொத்து மதிப்பு ஒதுக்கப்பட்டுள்ளது' url(/images/wolf-night.png) ”இங்கு படங்கள் என்பது wolf-night.png என்ற படத்தைக் கொண்ட கோப்புறை.
- ' பின்னணி-மீண்டும் 'சொத்து மதிப்பு ஒதுக்கப்பட்டுள்ளது' இல்லை-மீண்டும் , அதாவது படம் ஒரு முறை காட்டப்படும்.
- ' பின்னணி அளவு '' என அமைக்கப்பட்டுள்ளது கவர் ” முழு DIV உறுப்பு நிரப்ப.
- ' உயரம் ” என்பது 100vh, இது வியூபோர்ட்டின் உயரத்தின் 100% ஆகும்.
- ' நிலை ” என உறவினர் படத்தின் நிலையை அதன் தற்போதைய இருப்பிடத்துடன் ஒப்பிடுகிறார்.
- ' நிரம்பி வழிகிறது ” சொத்தின் மதிப்பு கன்டெய்னரில் பொருத்த முடியாத அளவுக்குப் பெரிய படத்தின் பகுதியை மறைக்க மறைத்து வைக்கப்பட்டுள்ளது.
உடை கிளவுட்1 வகுப்பு
.மேகம்1 {
பின்னணி படம்: url ( / படங்கள் / cloud.png ) ;
பின்னணி அளவு: கொண்டிருக்கும்;
பின்னணி-மீண்டும்: இல்லை-மீண்டும்;
நிலை: முழுமையான;
மேல்: 100px;
அகலம்: 500px;
உயரம்: 300px;
அனிமேஷன்: கிளவுட்அனிமேஷன்1;
அனிமேஷன்-காலம்: 70கள்;
அனிமேஷன்-மறுபடி-எண்ணிக்கை: எல்லையற்றது;
}
div class cloud1 பின்வரும் விளக்கப்பட்ட பண்புகளுடன் பயன்படுத்தப்படுகிறது:-
- ' .மேகம்1 'டிவ் கிளாஸ் கிளவுட் 1 ஐ அணுக பயன்படுகிறது.
- ' பின்னணி படம் ”பண்பு என்பது url(/images/cloud.png) ஆக அமைக்கப்பட்டுள்ளது, இதில் படங்கள் cloud.png படத்தைக் கொண்ட கோப்புறையாகும்.
- ' பின்னணி அளவு 'மதிப்புடன்' கொண்டிருக்கும் ” படத்தின் தெரிவுநிலையை உறுதி செய்கிறது.
- ' பின்னணி-மீண்டும் 'சொத்து' என அமைக்கப்பட்ட மதிப்பு இல்லை-மீண்டும் ” படத்தை மீண்டும் மீண்டும் செய்யாததாகக் காட்டுகிறது.
- ' நிலை ” அதன் பெற்றோரின் உறுப்புடன் தொடர்புடைய படத்தை முழுமையாக நிலைநிறுத்துகிறது.
- ' மேல் ” பண்பு படத்தை மேலே இருந்து 100px இல் அமைக்கிறது.
- ' அகலம் 'Div உறுப்புகளின் அகலத்தை 500px ஆக அமைக்க சொத்து பயன்படுத்தப்படுகிறது.
- ' உயரம் 'டிவ் உறுப்பின் உயரத்தை 300px ஆக அமைக்க சொத்து பயன்படுத்தப்படுகிறது.
- ' இயங்குபடம் ” க்கு cloudanimation1 என்ற பெயர் ஒதுக்கப்பட்டுள்ளது.
- ' அனிமேஷன்-காலம் ” என்பது அனிமேஷனின் கால அளவைக் குறிக்கிறது, இது 70 வினாடிகள்.
- ' அனிமேஷன்-மறுபடி-எண்ணிக்கை ” க்கு எல்லையற்ற மதிப்பு ஒதுக்கப்பட்டுள்ளது, இது அனிமேஷனை எண்ணற்ற முறை மீண்டும் செய்யும்.
இதுவரை, நாங்கள் CSS பண்புகளை div கிளாஸ் பிரதான பக்கம் மற்றும் cloud1 க்கு பயன்படுத்தியுள்ளோம். இப்போது, அடுத்த பகுதியில், cloud2 என்ற அடுத்த div வகுப்பை ஸ்டைல் செய்வோம்.
உடை கிளவுட்2 வகுப்பு
.மேகம்2 {
பின்னணி படம்: url ( / படங்கள் / cloud.png ) ;
பின்னணி அளவு: கொண்டிருக்கும்;
பின்னணி-மீண்டும்: இல்லை-மீண்டும்;
நிலை: முழுமையான;
மேல்: 50px;
அகலம்: 200px;
உயரம்: 300px;
அனிமேஷன்: கிளவுட்அனிமேஷன்2;
அனிமேஷன்-காலம்: 15வி;
அனிமேஷன்-மறுபடி-எண்ணிக்கை: எல்லையற்றது;
}
div class cloud2 ஆனது கீழே விளக்கப்பட்டுள்ள பண்புகளுடன் பயன்படுத்தப்படுகிறது:-
- ' .மேகம்2 ” என்பது கிளவுட்2 வகுப்பை அணுக பயன்படுகிறது.
- ' பின்னணி படம் ”பண்பு என்பது url(/images/cloud.png) ஆக அமைக்கப்பட்டுள்ளது, இதில் படம் cloud.png படத்தைக் கொண்ட கோப்புறையாகும்.
- ' பின்னணி அளவு ” என்பது படத்தின் தெரிவுநிலையை உறுதிப்படுத்தும் மதிப்பைக் கொண்டுள்ளது.
- ' பின்னணி-மீண்டும் 'நோ-ரிபீட் என அமைக்கப்பட்ட மதிப்பு கொண்ட சொத்து, படத்தை மீண்டும் மீண்டும் செய்யாததாகக் காட்டுகிறது.
- ' நிலை ” அதன் பெற்றோரின் உறுப்புடன் தொடர்புடைய படத்தை முழுமையாக நிலைநிறுத்துகிறது.
- ' மேல் ” பண்பு படத்தை மேலே இருந்து 100px இல் அமைக்கிறது.
- ' அகலம் 'டிவ் உறுப்பின் அகலத்தை அமைக்க சொத்து பயன்படுத்தப்படுகிறது.
- ' உயரம் 'டிவ் உறுப்பின் உயரத்தை அமைக்க சொத்து பயன்படுத்தப்படுகிறது.
- ' இயங்குபடம் ” க்கு cloudanimation2 என்ற பெயர் ஒதுக்கப்பட்டுள்ளது.
- ' அனிமேஷன்-காலம் ” என்பது அனிமேஷனின் கால அளவைக் குறிக்கிறது.
- ' அனிமேஷன்-மறுபடி-எண்ணிக்கை ” க்கு எல்லையற்ற மதிப்பு ஒதுக்கப்பட்டுள்ளது, இது அனிமேஷனை எண்ணற்ற முறை மீண்டும் செய்யும்.
Cloudanimation1க்கான @keyframes ஐக் குறிப்பிடவும்
@ கீஃப்ரேம்கள் கிளவுட்அனிமேஷன்1 {
செய்ய {
இடது: 0px;
}
இருந்து {
விட்டு: 100 % ;
}
}
Cloud1 div கீழே விவரிக்கப்பட்டுள்ள அனிமேஷனுடன் பிணைக்கப்பட்டுள்ளது:-
- ' @keyframes cloudanimation1 ” அனிமேஷன் கிளவுட்அனிமேஷன்1 என்ற பெயருக்குப் பிறகு @keyframes என்ற முக்கிய வார்த்தை மாற்றத்தைக் குறிப்பிடப் பயன்படுகிறது.
- @keyframes முக்கிய வார்த்தையானது, கிளவுட் படங்களில் தொடக்கத்திலிருந்து இறுதி வரை அனிமேஷன் எவ்வாறு செய்யப்படுகிறது என்பதைக் குறிப்பிடுகிறது.
- ' செய்ய 'மற்றும்' இருந்து ” முக்கிய வார்த்தைகள் கிளவுட்1 100% இலிருந்து திரையின் 0px க்கு நகரும் என்று குறிப்பிடுகிறது.
Cloudanimation2 க்கான @keyframes ஐக் குறிப்பிடவும்
@ கீஃப்ரேம்கள் கிளவுட்அனிமேஷன்2 {
0 % {
விட்டு: 0 % ;
}
100 % {
விட்டு: 100 % ;
}
}
div class cloud2 ஆனது கீழே விளக்கப்பட்டுள்ள அனிமேஷனுடன் தொடர்புடையது:-
- ' @keyframes cloudanimation2 ” என்பது அனிமேஷனைக் குறிப்பிடுவதற்குப் பயன்படுத்தப்படும் @keyframes என்ற அனிமேஷன் பெயரைக் குறிக்கும்.
- ' 0% 'மற்றும்' 100% ” என்பது அனிமேஷனின் தொடக்கத்தையும் முடிவையும் குறிக்கிறது.
- அனிமேஷனின் 0% இல், மேகம் இடதுபுறத்தில் மதிப்பு 0% ஆக இருக்கும், மேலும் அது படிப்படியாக 100% அகலத்திற்கு நகரும்.
வெளியீடு
மிகவும் நல்லது! @keyframes என்ற திறவுச்சொல்லைப் பயன்படுத்தி உறுப்புகளுக்கு அனிமேஷனை எவ்வாறு குறிப்பிடலாம் என்பதை நாங்கள் விவாதித்தோம்.முடிவுரை
HTML உறுப்புகளுக்கு ஸ்டைல்களைப் பயன்படுத்த CSS எங்களை அனுமதிக்கிறது. CSS இல் உள்ள அனிமேஷன் ஒரு பாணியிலிருந்து மற்றொரு பாணிக்கு மாற்றங்களைச் செய்கிறது. இது இரண்டு கூறுகளைக் கொண்டுள்ளது, அனிமேஷன் பாணிகள் மற்றும் கீஃப்ரேம்கள். அனிமேஷன் பாணிகள் அவற்றின் பெயர், அனிமேஷன்-காலம், அனிமேஷன்-மறுபடி-எண்ணிக்கை மற்றும் பல போன்ற பல்வேறு பண்புகளைக் குறிக்கின்றன. கீஃப்ரேம் கூறு அனிமேஷனின் ஆரம்பம் மற்றும் முடிவை வரையறுக்கிறது. எடுத்துக்காட்டுகளுடன் அனிமேஷன் கீஃப்ரேம்களை எவ்வாறு அமைப்பது என்பதை இந்த வழிகாட்டி விரிவாகக் கூறியுள்ளது.
- வகுப்பின் பெயரைக் கொண்ட