எளிய தமிழில் CSS – 10 – CSS3 – Animations – Transitions

CSS3

CSS3 என்பது முழுக்க முழுக்க செயல்முறையில் செய்து பார்த்து மகிழ வேண்டிய ஒரு விஷயம். இதற்கு நான் என்னதான் screenshot எடுத்துக் காட்டினாலும் உங்களால் உணர முடியாது. எனவே இதற்கான concept-ஐ மட்டும் நான் விளக்குகிறேன். நீங்களே இதனை செய்து பார்த்து மகிழுங்கள்.

Transitions

ஒருசில வலைத்தளப் பக்கங்களில் ஒரு சின்ன பெட்டிக்குள் ஒருசில எழுத்துக்கள் காணப்படும். நாம் அதன்மீது cursor-ஐக் கொண்டு சென்றால், அந்தப் பெட்டி கொஞ்சம் கொஞ்சமாக ஒரு குறிப்பிட்ட அளவு வரை பெரிதாகி அதற்குள் உள்ளவை தெளிவாகத் தெரியும். பின்னர் அதிலிருந்து cursor-ஐ எடுக்கும்போது அதன் அளவு மீண்டும் கொஞ்சம் கொஞ்சமாகக் குறைந்து அதன் பழைய நிலைக்குத் திரும்பும்.

இதுபோன்று விரிவடைந்து சுருங்குமாறு ஒரு division-ஐ மாற்றுவதற்கு transition எனும் பண்பு பயன்படுகிறது. முதலில் ஒரு சாதாரண <div> </div> ஐ program-ல் உருவாக்கிவிட்டு பின்னர் அதற்கான style section-ல் பின்வருமாறு கொடுக்கவும்.

div {width: 100px; height: 100px; background: red; transition: width 1s, height 1s;}

div:hover {width: 300px; height: 300px;}

இது 100px நீளமும் அகலமும் கொண்ட divition-ஐ 300px வரை விரிவடைய செய்யும். அதாவது 100px நீளமும் அகலமும் கொண்ட ஒரு division-ன் மீது cursor-ஐக் கொண்டு செல்லும்போது, அது 300px வரை விரிவடைய வேண்டும் என்பதை div:hover என்பது குறிக்கிறது. அவ்வாறு விரிவடையும் நிகழ்வானது 1 second-க்குள் நிகழ வேண்டும் என்பது transition-ன் மதிப்பாக <div> property-க்குள் கொடுக்கப்பட்டுள்ளது.

இதன் மூலம் division-ன் மீது cursor செல்லும்போது 1 second-க்குள் அந்த division-ஆனது விரிவடையும். அவ்வாறே அதிலிருந்து cursor நீங்கும்போது அதே 1 second-க்குள் division பழைய நிலைக்குத் திரும்பும்.

Transition-Delay:

Transition-delay என்பது எவ்வளவு நிமிடம் கழித்து அதனை விரிவடையச் செய்ய வேண்டும் என்பதைக் குறிப்பிடுகிறது.

div {transition-delay: 1s; transition: width 1s, height 1s; } என்று கொடுக்கும்போது, 1 நிமிடம் கழித்து வரும் அடுத்த 1 நிமிடத்துக்குள் division-ஐ விரிவடையச் செய்யும்.

Transform:

Transform என்பது எவ்வகையில் விரிவடைய வேண்டும் என்பதைக் குறிக்கிறது. div:hover {width: 300px; height: 300px; transform: rotate(180deg)} என்று கொடுத்தால் 180 degree-ல் சுழன்று கொண்டே 300px வரை விரிவடையும். இந்த degree-ன் மதிப்பை 90, 180, 360, 1200 என்றெல்லாம் கொடுத்து நிகழும் விளையாட்டை ரசிக்கவும்.

Animations

 

Animation என்பது வலைத்தளப் பக்கங்களில் இங்கும் அங்குமாக ஓடக்கூடிய அல்லது இயங்கக்கூடிய படங்களை உருவாக்கும் விதம் ஆகும். அதாவது சாதாரணமாக இருக்கும் படத்திற்கு ஏதேனும் ஒரு இயக்கத்தைக் கொடுத்தோமானால் அதுவே Animation எனப்படும்.

முதலில் ஒரு divition-ஐ இங்கும் அங்குமாக ஓடுமாறு செய்வது எவ்வாறு என்று பார்க்கலாம். இதற்கு ஒரு சாதாரண <div> </div> ஐ program-ல் உருவாக்கிவிட்டு பின்னர் அதற்கான style section-ல் பின்வருமாறு கொடுக்கவும்.

div {width: 100px; height: 100px; background: red; }

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

div {width: 100px; height: 100px; background: red; position: relative; animation: nithya 5s; }

animation: nithya 5s; என்பது ‘nithya’ எனும் பெயர் கொண்ட 5 second-க்குள் இயங்க வல்ல animation-ஐ உருவாக்கும். இதன் தொடர்ச்சியாக 2s எனும் மதிப்பினை இணைக்கும்போது, அது animation-ஐ 2 நிமிடம் கழித்து தொடங்கும் (animation: nithya 5s 2s;). பொதுவாக animation-ஆனது ஒரு முறை இயங்கி முடிந்து விடும். அது தொடர்ந்து நிகழ்ந்து கொண்டே இருக்க வேண்டும் என்றால் infinite எனும் வார்த்தையை குறிப்பிட வேண்டும் (animation: nithya 5s 2s infinite;). .

@keyframes:

இப்போது என்ன animation என்பதை @keyframes nithya-க்குள் விளக்கப் போகிறோம். இது style section-ல் அமையும்.

@keyframes nithya {0%{left:0px; top:0px;}25%{left:200px; top:0px;}50%{left:200px; top:200px;}75%{left:0px; top:200px;}100%{left:0px; top:0px;}}

மேலே உள்ள code-ஆனது division-ஐ நான்காமூலைக்கும் நகர்த்தும். எவ்வாறெனில், animation-ன் கால அளவான 5 second என்பது 25% முடியும்போது அந்த division எங்கு இருக்க வேண்டும், 50% முடியும்போது அந்த division எங்கு இருக்க வேண்டும், அவ்வாறே 75%, 100% – க்கும் தனித்தனியே கொடுக்கப்பட்டுள்ளது. எனவே 5 second-க்குள் அந்த division எங்கெங்கு இருக்க வேண்டுமோ அங்கங்கு சென்று வருகிறது. 0px, 200px எனும் மதிப்புகளை மாற்றி மாற்றி அமைத்து நிகழும் விளையாட்டை ரசிக்கவும். @keyframes என்பது division நகரும்பொழுது அது மிதமான வேகத்தில் அழகாக நகர உதவுகிறது.

அடுத்தபடியாக ஒவ்வொரு இடத்திற்கு நகரும்பொழுதும் அதன் நிறம் மாறுமாறு செய்ய background-color எனும் பண்பினை பின்வருமாறு keyframes – க்குள் இணைக்கலாம். 25%{background-color: yellow; left:200px; top:0px;}

 

 

து. நித்யா

nithyadurai87@gmail.com

தொடரின் பிற பகுதிகளைப் படிக்க – www.kaniyam.com/category/css-in-tamil/

%d bloggers like this: