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

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

அனிமேஷன் என்பது CSS இல் சேமிக்கப்பட்ட கீஃப்ரேம்கள் அல்லது கீஃப்ரேம்களின் தொகுப்பாகும்:

@keyframes அனிமேஷன்-சோதனை (0% (அகலம்: 100px; ) 100% (அகலம்: 200px; ) )

இங்கே என்ன நடக்கிறது என்று பார்ப்போம். @keyframes முக்கிய சொல் அனிமேஷனையே குறிக்கிறது. பின்னர் அனிமேஷனின் பெயர் வருகிறது, எங்கள் விஷயத்தில் அனிமேஷன்-சோதனை. சுருள் பிரேஸ்கள் கீஃப்ரேம்களின் பட்டியலைக் கொண்டிருக்கும். நாங்கள் 0% தொடக்க சட்டத்தையும் 100% முடிவு சட்டத்தையும் பயன்படுத்துகிறோம் (அவை இருந்து மற்றும் வரை என எழுதப்படலாம்).
கீழே உள்ள குறியீட்டைப் பாருங்கள். அனிமேஷனை இப்படியும் அமைக்கலாம்:

@keyframes அனிமேஷன்-சோதனை (அகலம்: 0; ) 25% (அகலம்: 75px; ) 75% (அகலம்: 150px; ) முதல் (அகலம்: 100%; ) )

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

இது போன்ற ஒரு உறுப்புடன் நீங்கள் அனிமேஷனை இணைக்கலாம்:

எலிமென்ட்-செலக்டர் (அனிமேஷன்-பெயர்: உங்கள்-அனிமேஷன்-பெயர்; அனிமேஷன்-காலம்: 2.5வி; )

அனிமேஷன்-பெயர் சொத்து @keyframes அனிமேஷனுக்கான பெயரைக் குறிப்பிடுகிறது. அனிமேஷன்-கால விதியானது அனிமேஷனின் கால அளவை வினாடிகள் (1வி, 30வி, .5வி) அல்லது மில்லி விநாடிகளில் (600எம்எஸ், 2500எம்எஸ்) குறிப்பிடுகிறது.

நீங்கள் கீஃப்ரேம்களையும் குழுவாக்கலாம்:

@keyframes அனிமேஷன்-சோதனை (0%, 35% (அகலம்: 50px; ) 75% (அகலம்: 200px; ) 100% (அகலம்: 100%; ) )

ஒரு உறுப்புக்கு (தேர்ந்தெடுக்கும் கருவி) பல அனிமேஷன்களைப் பயன்படுத்தலாம். அவற்றின் பெயர்கள் மற்றும் அளவுருக்கள் விண்ணப்பத்தின் வரிசையில் எழுதப்பட வேண்டும்:

எலிமென்ட்-செலக்டர் (அனிமேஷன்-பெயர்: அனிம்-பெயர்-1, அனிம்-பெயர்-2; அனிமேஷன்-காலம்: 1வி, 3வி; )

அனிமேஷன் தாமதம்:

அனிமேஷன்-தாமதப் பண்பு, அனிமேஷன் இயங்கும் முன் தாமதத்தை வினாடிகள் அல்லது மில்லி விநாடிகளில் குறிப்பிடுகிறது:

எலிமென்ட்-செலக்டர் (அனிமேஷன்-பெயர்: அனிம்-பெயர்-1; அனிமேஷன்-காலம்: 3வி; அனிமேஷன்-தாமதம்: 2வி; /* அனிமேஷன் தொடங்குவதற்கு முன் 2 வினாடிகள் கடந்துவிடும் */ )

ரீப்ளே அனிமேஷன்:

அனிமேஷன்-மறுபடி-எண்ணிக்கையைப் பயன்படுத்தி, அனிமேஷன் எத்தனை முறை மீண்டும் நிகழும் என்பதைக் குறிப்பிடலாம்: 0, 1, 2, 3, முதலியன. அல்லது லூப்பிங்கிற்கு எல்லையற்றது:

எலிமென்ட்-செலக்டர் (அனிமேஷன்-பெயர்: அனிம்-பெயர்-1; அனிமேஷன்-காலம்: 3கள்; அனிமேஷன்-தாமதம்: 4கள்; அனிமேஷன்-மறுபடி-எண்ணிக்கை: 5; /* அனிமேஷன் 5 முறை விளையாடுகிறது */ )

அனிமேஷனுக்கு முன்னும் பின்னும் உறுப்பு நிலை:

அனிமேஷன்-ஃபில்-மோட் பண்பைப் பயன்படுத்தி, அனிமேஷன் தொடங்குவதற்கு முன்பும் அது முடிவடைந்த பின்பும் உறுப்பு எந்த நிலையில் இருக்கும் என்பதைக் குறிப்பிடலாம்:

அனிமேஷன்-நிரப்பு-முறை: முன்னோக்கி;- அனிமேஷன் உறுப்பு நிறைவு/பிளேபேக்கிற்குப் பிறகு கடைசி கீஃப்ரேம் நிலையில் இருக்கும்;

அ nimation-fill-mode: பின்னோக்கி;- உறுப்பு முதல் கீஃப்ரேமின் நிலையில் இருக்கும்;

அனிமேஷன்-நிரப்பு-முறை: இரண்டும்; - அனிமேஷன் தொடங்கும் முன், உறுப்பு முதல் கீஃப்ரேமின் நிலையில் இருக்கும், முடிந்த பிறகு - கடைசி நிலையில் இருக்கும்.

அனிமேஷனைத் தொடங்கவும் நிறுத்தவும்:

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

எலிமென்ட்-செலக்டர்:ஹோவர் (அனிமேஷன்-ப்ளே-ஸ்டேட்: இடைநிறுத்தப்பட்டது; )

அனிமேஷன் திசை:

அனிமேஷன்-திசைப் பண்பு அனிமேஷன் இயங்கும் திசையை எவ்வாறு கட்டுப்படுத்துவது என்பதைக் குறிப்பிடுகிறது. சாத்தியமான மதிப்புகள் இங்கே:

அனிமேஷன்-திசை: சாதாரண; - அனிமேஷன் நேரடி வரிசையில் விளையாடப்படுகிறது;

அனிமேஷன்-திசை: தலைகீழ்; - அனிமேஷன் தலைகீழ் வரிசையில், இருந்து இருந்து விளையாடப்படுகிறது;

அனிமேஷன்-திசை: மாற்று;- அனிமேஷன் மீண்டும் மீண்டும் தலைகீழ் வரிசையில் விளையாடப்படுகிறது, ஒற்றைப்படை - முன்னோக்கி வரிசையில்;

அனிமேஷன்-திசை: மாற்று-தலைகீழ்; - ஒற்றைப்படை அனிமேஷன் மறுமுறைகள் தலைகீழ் வரிசையில் விளையாடப்படுகின்றன, ஒன்று கூட - முன்னோக்கி வரிசையில்.

அனிமேஷன் பிரேம்களின் மென்மையான வெளியீட்டின் செயல்பாடு:

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

இருப்பினும், அத்தகைய செயல்பாடுகளை நீங்களே உருவாக்கலாம். பொருள் animation-time-function: cubic-bezier(P1x, P1y, P2x, P2y); 4 வாதங்களை உள்ளீடாக எடுத்து அனிமேஷன் செயல்முறைக்கு ஒரு விநியோக வளைவை உருவாக்குகிறது.

நீங்கள் இன்னும் விரிவாக படிக்கலாம் அல்லது இணையதளத்தில் இந்த செயல்பாடுகளை உருவாக்க முயற்சி செய்யலாம் http://cubic-bezier.com

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

எலிமென்ட்-செலக்டர் (அனிமேஷன்-பெயர்: அனிம்-பெயர்-1; அனிமேஷன்-காலம்: 3வி; அனிமேஷன்-தாமதம்: 5வி; அனிமேஷன்-மறுபடி-எண்ணிக்கை: 3; அனிமேஷன்-நேரம்-செயல்பாடு: படிகள்(5, முடிவு); )

அனிமேஷனுக்கான உலாவி ஆதரவு:

அட்டவணையில் உள்ள மதிப்புகள் சொத்தை முழுமையாக ஆதரிக்கும் முதல் உலாவி பதிப்பைக் குறிக்கின்றன.

-webkit-, -moz- அல்லது -O- உடன் மதிப்புகள் முன்னொட்டுடன் வேலை செய்த முதல் பதிப்பைக் குறிக்கின்றன.

https://www.w3schools.com என்ற இணையதளத்தில் நீங்கள் CSS அனிமேஷனை இன்னும் விரிவாகப் படிக்கலாம் (உதாரணங்களுடன்).
அனிமேஷன்களுடன் பணிபுரியும் பிரபலமான நூலகங்களில் ஒன்று animate.css.

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

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

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

கட்டுரையில் நீங்கள் கண்டுபிடித்தீர்கள் என்று நம்புகிறேன் பயனுள்ள தகவல்எனக்காக. அனைவருக்கும் அழகான தளங்கள். அனிமேஷன்களைப் பற்றி மறந்துவிடாதீர்கள் :)

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

உருவாக்க அடிப்படைகள்

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

@keyframes ஐப் பயன்படுத்தி மாற்ற விளைவுகள் உருவாக்கப்படுகின்றன

தேவையான உறுப்புக்கு இதே அனிமேஷனும், அதன் அளவுருக்களும் கொடுக்கப்பட்டுள்ளன (இவை அனைத்தும் பண்புகள் மற்றும் அவற்றின் மதிப்புகளைப் பயன்படுத்தி).

எனவே, முதலில் @keyframes இல் தேவையான மாற்றங்களை விவரிக்க வேண்டும், அவற்றுடன் எவ்வாறு வேலை செய்வது என்பதை விரிவாகப் பார்ப்போம்.

@keyframes தொடரியல்

உண்மையில், ஒரு ஆயத்த உதாரணத்தைப் பயன்படுத்தி எல்லாவற்றையும் உங்களுக்கு விளக்குவது எனக்கு எளிதாக இருக்கும், இருப்பினும் மிகவும் எளிமையானது. இதோ (குறியீடு css கோப்பில் சேர்க்கப்பட்டுள்ளது):

@keyframes pulse( 0%(எழுத்துரு அளவு: 50px;) 50%(எழுத்துரு அளவு: 60px;)) 100%(எழுத்துரு அளவு: 50px;))

@keyframes துடிப்பு ( 0% (எழுத்து அளவு: 50px;) 50% (எழுத்துரு அளவு: 60px;))

எனவே, @keyframes முக்கிய சொல்லுக்குப் பிறகு ஒரு தன்னிச்சையான சொல் உள்ளது, அது அனிமேஷனின் பெயராக செயல்படும். எங்கள் விஷயத்தில் அது "துடிப்பு". அடுத்து, தேவையான விதிகள் எழுதப்பட்ட சுருள் பிரேஸ்களைத் திறக்கவும்.

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

இருந்து மற்றும் முக்கிய வார்த்தைகள் சதவீத உள்ளீட்டை மாற்றலாம்; அவை முறையே 0% மற்றும் 100%, அதாவது பிளேபேக்கின் ஆரம்பம் மற்றும் முடிவு ஆகியவற்றைக் குறிக்கின்றன.

அனிமேஷனை செயலில் வைப்பது

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

அது பயன்படுத்தப்படும் உறுப்பைத் தேர்ந்தெடுக்கவும்

@keyframes (பெயர் வழியாக) மூலம் விவரிக்கப்பட்டுள்ள விதிகளுடன் அதை இணைக்கவும், மேலும் அமைக்கவும் கூடுதல் அமைப்புகள்அவசியமென்றால்.

நாம் முயற்சிப்போம்

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

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

எனவே, எங்கள் தொகுதி ஏற்கனவே உள்ள பாணிகளுக்கு கூடுதலாக, நாங்கள் புதியவற்றைச் சேர்க்கிறோம்:

அனிமேஷன்-பெயர்: துடிப்பு; அனிமேஷன்-காலம்: 2வி;

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

css3 இல் முடிவற்ற அனிமேஷன்

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

அனிமேஷன்-மறுபடி-எண்ணிக்கை: எல்லையற்றது;

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

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

தொடங்குவதற்கு முன் தாமதம்

இயல்பாக, பக்கம் முழுமையாக ஏற்றப்பட்ட பிறகு பிளேபேக் தொடங்கும். அனிமேஷன்-தாமதப் பண்பைப் பயன்படுத்தி இந்த நடத்தையை கட்டுப்படுத்தலாம். அதன் மதிப்பு நொடிகளில் குறிப்பிடப்படுகிறது.

திசையில்

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

@keyframes துடிப்பு( 0%(எழுத்துரு அளவு: 50px;) 50%(எழுத்துரு அளவு: 60px;) 70%(எழுத்துரு அளவு: 80px;) 100%(எழுத்துரு அளவு: 50px;))

@keyframes துடிப்பு ( 0% (எழுத்து அளவு: 50px;) 50% (எழுத்துரு அளவு: 60px;) 70% (எழுத்துரு அளவு: 80px;) 100% (எழுத்துரு அளவு: 50px;))

எனவே, ஒரு சாதாரண திசையுடன், அனிமேஷனின் முதல் பாதியில் எழுத்துரு அளவு 60 பிக்சல்களாக அதிகரிக்கும், பின்னர் அது மீண்டும் கூர்மையாக 80 ஆக அதிகரிக்கும், அதன் பிறகு அதன் அசல் நிலைக்குத் திரும்பும்.

அரிசி. 2. அசல் உரை அளவு

அரிசி. 3. எழுத்துரு அளவு அனிமேஷனின் முடிவில் உள்ளது, திடீரென்று அதன் அசல் நிலைக்குத் திரும்பும்.

இப்போது நாம் கேட்கிறோம்:

அனிமேஷன்-திசை: தலைகீழ்;

அனிமேஷன் - திசை : தலைகீழ் ;

எல்லாம் தலைகீழாக மாறியது. முதலில், உரை 30 பிக்சல்கள், 80 வரை அதிகரிக்கும், மேலும் மீதமுள்ள அனிமேஷனில் அது படிப்படியாகக் குறைந்து, இறுதியில் அதன் முந்தைய அளவுக்குத் திரும்பும். இது எளிமை.

அனிமேஷன் வடிவம்

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

வாழ்த்துக்கள் நண்பர்களே! இன்று நாம் மிகவும் சுவாரஸ்யமான தலைப்பைப் பார்ப்போம் - உண்மையான உதாரணத்தைப் பயன்படுத்தி CSS அனிமேஷன்களை உருவாக்குதல். இந்த டுடோரியலின் உச்சக்கட்டம் மில்லியன் டாலர் லோகோவின் அழகான CSS அனிமேஷனை உருவாக்கும்.

குளிர்

தடுமாற்றம்

பாடம் பொருட்கள்

• ஆதாரங்கள்: பதிவிறக்கம்
• பாடத்திலிருந்து அடிப்படை எடுத்துக்காட்டு: https://codepen.io/agragregra/pen/PKNavm
• பாடத்திலிருந்து டெம்ப்ளேட்டைத் தொடங்குதல்: https://github.com/agragregra/optimizedhtml-start-template

ஒரு சிறிய கோட்பாடு

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

Adobe After Effects அல்லது பழைய Flash Professional (இப்போது) போன்ற ஏதேனும் பயன்பாடுகளில் அனிமேஷன்களை உருவாக்கும் அனுபவம் உங்களுக்கு ஏற்கனவே இருந்தால் அடோப் அனிமேட்), பின்னர் "கீஃப்ரேம்கள்", "தற்காலிக செயல்பாடுகள் அல்லது இயக்க இயக்கவியல்" போன்ற கருத்துகளை நீங்கள் நன்கு அறிந்திருக்க வேண்டும், இது அனிமேஷனின் வேறு எந்தப் பகுதியிலும், CSS ஐப் பயன்படுத்தி ஒரு பக்கத்தில் உள்ள உறுப்புகளின் அனிமேஷனுக்குப் பொருந்தும். இருப்பினும், பயன்பாட்டு இடைமுகங்களுடன் பணிபுரிவது போலல்லாமல், எடிட்டரில் குறியீட்டை எழுதுவதன் மூலம் உங்கள் CSS அனிமேஷன்களை உருவாக்குகிறீர்கள்.

CSS விதி @keyframes

ஒரு CSS அனிமேஷனை உருவாக்குவது, ஒரு தொகுதியில் அனிமேஷனின் பெயரை அறிவிப்பதன் மூலம் தொடங்குகிறது @keyframesமற்றும் அனிமேஷன் படிகள் அல்லது முக்கிய பிரேம்கள் என அழைக்கப்படும் வரையறுத்தல்.

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

@keyframes கட்டமைப்பையும் கீஃப்ரேம்களுடன் வேலை செய்வதையும் பார்க்கலாம் எளிய உதாரணம்:

@keyframes திருப்பு (0% (எல்லை-ஆரம்: 0 0 0 0; உருமாற்றம்: சுழற்று(0deg); ) 25% (எல்லை-ஆரம்: 50% 0 0 0; உருமாற்றம்: சுழற்று(45deg); ) 50% (எல்லை- ஆரம்: 50% 50% 0 0; உருமாற்றம்: சுழற்று (90 டிகிரி); 75% (எல்லை-ஆரம்: 50% 50% 50% 0; உருமாற்றம்: சுழற்று (135 டிகிரி); 100% (எல்லை-ஆரம்: 50% 50 % 50% 50%; உருமாற்றம்: சுழற்று(180deg); ) )

முதல் வரியில் நாம் அதை பிறகு பார்க்கிறோம் முக்கிய வார்த்தை@keyframes அதன் பெயர் "திருப்பு". இது பிரேம் பிரேம்களின் தொகுதியின் பெயர், இதை நாம் மேலும் குறிப்பிடுவோம்.

அறிவிப்புக்குப் பிறகு, ஒரு சுருள் பிரேஸ் திறக்கிறது (இன் இந்த எடுத்துக்காட்டில்அன்று தூய CSS), இதில் பண்புகள் ஒவ்வொரு விசை சட்டத்திற்கும் 0% முதல் 100% வரை தொடர்ச்சியாக எழுதப்படுகின்றன. 0% மற்றும் 100% இடையே நீங்கள் விரும்பும் பல இடைநிலை மதிப்புகளைச் செருகலாம், அது 50%, 75% அல்லது 83% ஆக இருக்கலாம். இது ஒரு அனிமேஷன் பயன்பாட்டின் காலவரிசைக்கு மிகவும் ஒத்ததாகும், இதில் நீங்கள் இரண்டு மாநிலங்களுக்கு இடையில் எந்த இடைநிலை நிலையையும் சேர்க்கலாம்.

மேலும், இந்த கீஃப்ரேம்கள் கொண்ட குறியீட்டின் தொகுதி எந்த CSS தேர்வியிலும் பயன்படுத்தப்படலாம், ஆனால் பெரும்பாலும் நாம் விரும்பிய தொகுதியிலிருந்து ஒரு குறிப்பிட்ட நடத்தையை அடைய விரும்பினால் அவை ஒரு குறிப்பிட்ட தேர்வாளருக்காகத் தயாராக இருக்கும்.

முக்கிய பிரேம்களின் தொகுதியை அணுகுகிறது

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

Div (அகலம்: 120px; உயரம்: 120px; பின்னணி-நிறம்: ஊதா; விளிம்பு: 100px; அனிமேஷன்: 2s எளிதாக-அவுட் 1s முடிவிலா மாற்று; )

கடைசி வரி வரை சிறப்பு எதுவும் இல்லை. பொருள் ஆரம்பத்தில் எப்படி இருக்கும் என்பதை இங்கே நாம் தீர்மானிக்கிறோம் மற்றும் தொகுதியின் கடைசி வரியில் "திருப்பு" எனப்படும் முக்கிய பிரேம்களின் தொகுதியைக் குறிப்பிடுகிறோம்:

அனிமேஷன்: 2s எளிதாக-அவுட் 1s எல்லையற்ற மாற்று;

முக்கிய பிரேம்களின் வரையறையுடன் எல்லாம் ஒப்பீட்டளவில் தெளிவாக இருந்தால், இந்த வரிக்கு உடனடி விளக்கம் தேவை. நாம் பார்ப்பது போல், முதலில் வருகிறது CSS சொத்து"இயங்குபடம்". இது "விளிம்பு: 20px 30px 40px 50px" போன்ற ஒரு சுருக்கெழுத்து வடிவமாகும், இதைப் பல தனித்தனி பண்புகளாகப் பிரிக்கலாம்:

இந்த ஒப்புமை மூலம், கலப்பு சொத்து "அனிமேஷன்" பல தனித்தனி பண்புகளாக பிரிக்கலாம்:

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

பெரும்பாலும், அனுபவம் வாய்ந்த டெவலப்பர்கள் இந்த பண்புகள் அனைத்தையும் தனித்தனியாக எழுதுவதில்லை, ஆனால் ஒரு குறுகிய குறியீட்டைப் பயன்படுத்துகின்றனர் மற்றும் அதன் அமைப்பு பின்வருமாறு:

அனிமேஷன்: (1. அனிமேஷன்-பெயர் - பெயர்) (2. அனிமேஷன்-காலம் - கால அளவு) (3. அனிமேஷன்-நேரம்-செயல்பாட்டு இயக்கவியல்) (4. அனிமேஷன்-தாமதம் - தொடக்கத்திற்கு முன் இடைநிறுத்தம்) (5. அனிமேஷன்-மறுபடி- எண்ணிக்கை - செயல்படுத்தல்களின் எண்ணிக்கை) (6. அனிமேஷன்-திசை - திசை)

அனிமேஷன்: அனிமேஷன் பெயர் 2s லீனியர் 1s இன்ஃபினிட் ரிவர்ஸ்

எடுத்துக்காட்டில் இருந்து நாம் @keyframes அனிமேஷன் பெயர் தொகுதியை அணுகுவதைக் காண்கிறோம், அனிமேஷனின் கால அளவை 2 வினாடிகளுக்கு அமைக்கிறோம், இயக்கவியல் நேரியல், தொடங்கும் முன் இடைநிறுத்தம் 1 வினாடி, அனிமேஷன் முடிவில்லாமல் மீண்டும் மீண்டும் மற்றும் எதிர் திசையில் செயல்படுத்தப்படுகிறது.

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

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

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

1. CSS3 அனிமேஷனின் அடிப்படை பண்புகள்

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

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

உங்கள் முதல் CSS3 அனிமேஷனை உருவாக்க போதுமான அடிப்படை பண்புகள் இங்கே உள்ளன.

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

மேலே நாம் முதல் மற்றும் கடைசி சட்டத்தை அமைத்தோம். அனைத்து இடைநிலை நிலைகளும் தானாக கணக்கிடப்படும்!

2. உண்மையான CSS3 அனிமேஷன் எடுத்துக்காட்டு

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

நிரலாக்க மொழியைக் கற்கும்போது, ​​​​நீங்கள் வழக்கமாக “ஹலோ, வேர்ல்ட்!” நிரலை எழுதுவீர்கள், அதில் இருந்து இந்த மொழியின் தொடரியல் மற்றும் வேறு சில அடிப்படை விஷயங்களை நீங்கள் புரிந்து கொள்ளலாம். ஆனால் நாங்கள் ஒரு நிரலாக்க மொழியைப் படிக்கவில்லை, ஆனால் ஒரு விளக்க மொழியைப் படிக்கிறோம் தோற்றம்ஆவணம். எனவே, எங்களுடைய சொந்த "வணக்கம், உலகம்!"

உதாரணமாக நாம் என்ன செய்வோம்:எங்களுக்கு ஒரு வகையான தொகுதி இருக்கட்டும்