சிஎஸ்எஸ் கீஃப்ரேம் அனிமேஷன்களை உருவாக்குவது எப்படி

CSS டெவலப்பர்களுக்கு கீஃப்ரேம்ஸ் அனிமேஷனைப் பயன்படுத்தி தங்கள் வலைப்பக்கங்களை உயிர்ப்பிக்கும் திறனை வழங்குகிறது.

CSS அனிமேஷன் அதன் பல்வேறு பண்புகள் மூலம் ஒரு HTML உறுப்பின் ஆரம்ப நிலையை மாற்றுவதன் மூலம் அடையப்படுகிறது. அனிமேஷன் செய்யக்கூடிய சில பொதுவான CSS பண்புகள்:

---

---

அநாமதேய மின்னஞ்சலை எப்படி அனுப்புவது

• அகலம்
• உயரம்
• நிலை
• நிறம்
• ஒளிபுகா தன்மை

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

கீஃப்ரேம்ஸ் அங்கம் என்றால் என்ன?

தி keyframes உறுப்பு அதை அணுகக்கூடிய ஒன்று அல்லது அதற்கு மேற்பட்ட HTML உறுப்புகளில் பயன்படுத்தலாம். இது ஒரு தனிமத்தின் நிலையில் ஒரு குறிப்பிட்ட புள்ளியை அடையாளம் கண்டு, இந்த உறுப்பு இந்த நேரத்தில் இருக்க வேண்டிய தோற்றத்தை ஆணையிடுகிறது.

இது ஜீரணிக்க நிறைய தெரிகிறது, ஆனால் அது உண்மையில் மிகவும் எளிது. தி keyframes உறுப்பு எந்தவொரு அனிமேஷன் தேவைகளுக்கும் எளிதில் புரிந்துகொள்ளக்கூடிய மற்றும் சரிசெய்யக்கூடிய அழகான நேரடியான அமைப்பைக் கொண்டுள்ளது.

கீஃப்ரேம்கள் அமைப்பு உதாரணம்


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

நீல நிற வட்டப் பொத்தானாக மாற்றுவதன் மூலம் ஒரு பச்சை செவ்வக பொத்தானை உயிரூட்ட விரும்புகிறீர்கள் என்று சொல்லலாம்.

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

---

---

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

அனிமேஷன் சொத்து

தி அனிமேஷன் சொத்து பல்வேறு துணை பண்புகளின் தொகுப்பைக் கொண்டுள்ளது; விரும்பிய HTML உறுப்பை உயிர்ப்பிக்க மேலே உள்ள கீஃப்ரேம் கட்டமைப்போடு இணைந்து இவை பயன்படுத்தப்படுகின்றன.

---

---

இருப்பினும், உங்கள் திட்டங்களில் அனிமேஷனை அடைய, இந்த ஐந்து துணை பண்புகள் மற்றும் அவற்றுடன் தொடர்புடைய மதிப்புகளை மட்டுமே நீங்கள் தெரிந்து கொள்ள வேண்டும். இந்த பண்புகள் அறியப்படுகின்றன:

• அனிமேஷன்-பெயர்
• அனிமேஷன்-காலம்
• அனிமேஷன்-நேரம்-செயல்பாடு
• அனிமேஷன்-தாமதம்
• அனிமேஷன்-மறு செய்கை-எண்ணிக்கை

வலைப்பக்கத்தில் அனிமேஷனைப் பயன்படுத்துதல்

மேலே உள்ள காட்சியைப் பயன்படுத்தி, அனிமேஷன் பொத்தானை உருவாக்குவதே குறிக்கோள்.

பட்டன் அனிமேஷன் உதாரணம்







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!




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

தொடர்புடையது: CSS தேர்வாளர்களைப் பயன்படுத்தி ஒரு வலைப்பக்கத்தின் பகுதியை எவ்வாறு குறிவைப்பது

அனிமேஷன்-பெயர் சொத்து

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

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

அனிமேஷன்-கால சொத்து

ஒரு அனிமேஷன் உறுப்பு ஒரு மாநிலத்திலிருந்து அடுத்த மாநிலத்திற்கு மாறும்போது எடுக்க வேண்டிய நேரத்தை வரையறுக்க இந்த சொத்து பயன்படுத்தப்படுகிறது.

மேலே உள்ள எடுத்துக்காட்டில், தி அனிமேஷன்-கால சொத்து 5 வினாடிகளுக்கு (5 வி) அமைக்கப்பட்டுள்ளது, எனவே பச்சை செவ்வக பொத்தானை நீல வட்ட பொத்தானாக மாறுவதற்கு முன்பு மொத்தம் 5 வினாடிகள் இருக்கும்.

அனிமேஷன்-தாமத சொத்து

இந்த சொத்து ஒரு காரணத்தால் முக்கியமானது; சில வலைப்பக்கங்கள் முழுமையாக ஏற்றுவதற்கு சில வினாடிகள் ஆகலாம் (பல்வேறு காரணிகளால்). அதனால் அனிமேஷன்-தாமத சொத்து வலைப்பக்கம் ஏற்றுவதற்கு சிறிது நேரம் எடுத்துக் கொண்டால் அனிமேஷன் உடனடியாகத் தொடங்குவதைத் தடுக்கிறது.

மேலே உள்ள எடுத்துக்காட்டில், தி அனிமேஷன்-தாமத சொத்து 4s ஆக அமைக்கப்பட்டுள்ளது, அதாவது வலைப்பக்கத்தை பார்வையிட்ட 4 வினாடிகள் வரை அனிமேஷன் தொடங்காது (அனிமேஷன் தொடங்குவதற்கு முன் வலைப்பக்கத்தை ஏற்றுவதற்கு போதுமான நேரத்தை அளிக்கிறது).

அனிமேஷன்-மறு செய்கை-எண்ணிக்கை சொத்து

அனிமேஷன் செய்யப்பட்ட உறுப்பு எத்தனை முறை ஒரு மாநிலத்திலிருந்து இன்னொரு மாநிலத்திற்கு மாற வேண்டும் என்பதை இந்த சொத்து கூறுகிறது. தி அனிமேஷன்-மறு செய்கை-எண்ணிக்கை சொத்து வார்த்தைகள் மற்றும் எண்களாக இருக்கும் மதிப்புகளை எடுக்கும். எண் மதிப்பு 1 முதல் மேல் வரை இருக்கலாம், அதே நேரத்தில் வார்த்தை மதிப்பு பொதுவாக இருக்கும் எல்லையற்ற .

மேலே உள்ள எடுத்துக்காட்டில், தி அனிமேஷன்-மறு செய்கை-எண்ணிக்கை மதிப்பு அமைக்கப்பட்டுள்ளது எல்லையற்ற அதாவது, வலைப்பக்கம் இருக்கும் வரை பொத்தான் சொத்து ஒரு மாநிலத்தில் இருந்து அடுத்த மாநிலத்திற்கு தொடர்ந்து உயிருடன் இருக்கும்.

அனிமேஷன்-நேர-செயல்பாட்டு சொத்து

இந்த சொத்து அனிமேஷன் செய்யப்பட்ட தனிமத்தின் இயக்கத்தை கட்டளையிடுகிறது, ஏனெனில் இது ஒரு மாநிலத்திலிருந்து அடுத்த நிலைக்கு மாறும். தி அனிமேஷன்-நேர-செயல்பாட்டு சொத்து பொதுவாக மூன்று எளிமையான மதிப்புகளில் ஒன்று ஒதுக்கப்படும்.

• எளிமை
• எளிதாக்குதல்
• எளிதாக வெளியே

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

எங்கள் குறியீட்டை குறைத்தல்

பெரும்பாலான நிகழ்வுகளில், ஒரு நிரலின் நீளத்தைக் குறைப்பது ஒரு நடைமுறை அணுகுமுறையாகக் காணப்படுகிறது. இதற்கு முக்கிய காரணம், குறியீட்டின் குறைவான வரிகள் உங்கள் திட்டங்களில் கவனிக்கப்படாமல் போகும் பிழைகளின் வாய்ப்பைக் குறைக்கிறது.

மேலே உள்ள குறியீட்டை நான்கு வரிகளால் குறைக்கலாம். அனிமேஷன் சொத்தைப் பயன்படுத்துவதன் மூலம் அதன் ஒவ்வொரு துணைப் பண்புகளையும் வெளிப்படையாக அடையாளம் காணாமல் இதை அடைய முடியும்.

பட்டன் அனிமேஷன் உதாரணத்திற்கான குறியீட்டை குறைத்தல்







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}