Animate.css விமர்சனம்

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

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

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

animate.css

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

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

கிட்ஹப்பைப் பயன்படுத்துவது எளிதானது மற்றும் நீங்கள் தேடும் விளைவைக் கண்டறிய கீழே துளைக்கவும்.

1. CSS GitHub பக்கத்திற்கு செல்லவும்.
2. உறுப்புகளின் பட்டியலை அணுக மூல இணைப்பைக் கிளிக் செய்க.
3. பட்டியலிலிருந்து நீங்கள் தேடும் விளைவு வகையைத் தேர்ந்தெடுக்கவும். பவுன்ஸ் ஒரு கவனத்தைத் தேடுபவர், எனவே கவனத்தை தேடுபவர்களின் இணைப்பைத் தேர்ந்தெடுக்கவும்.
4. Bounce.css ஐத் தேர்ந்தெடுக்கவும்.
5. அனிமேஷனைப் பயன்படுத்துவதற்கு குறியீட்டை நகலெடுத்து உங்கள் பக்கத்தில் வைக்கவும்.

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

Animate.css உடன் அனிமேஷன் செய்யப்பட்ட பொருளை உருவாக்குதல்

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

Animate.css பக்கத்தில் முதல் விருப்பம் பவுன்ஸ், எனவே இந்த எடுத்துக்காட்டில் அதைப் பயன்படுத்துவோம்.

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

@keyframes பவுன்ஸ் {

முதல், 20%, 53%, 80%, முதல் {

அனிமேஷன்-டைமிங்-செயல்பாடு: க்யூபிக்-பெஜியர் (0.215, 0.610, 0.355, 1.000);

உருமாற்றம்: மொழிபெயர்ப்பு 3 டி (0, 0, 0);

}

40%, 43% {

அனிமேஷன்-டைமிங்-செயல்பாடு: க்யூபிக்-பெஜியர் (0.755, 0.050, 0.855, 0.060);

உருமாற்றம்: மொழிபெயர்ப்பு 3 டி (0, -30 பிஎக்ஸ், 0);

}

70% {

அனிமேஷன்-டைமிங்-செயல்பாடு: க்யூபிக்-பெஜியர் (0.755, 0.050, 0.855, 0.060);

உருமாற்றம்: மொழிபெயர்ப்பு 3 டி (0, -15px, 0);

}

90% {

உருமாற்றம்: மொழிபெயர்ப்பு 3 டி (0, -4px, 0);

}

}

.பவுன்ஸ் {

அனிமேஷன்-பெயர்: பவுன்ஸ்;

உருமாற்றம்-தோற்றம்: மையத்தின் அடிப்பகுதி;

}

Animate.css உடன் அனிமேஷனை மேலும் எடுத்துக்கொள்வது

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

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

.animated: மிதவை {

-வெப்கிட்-அனிமேஷன்-காலம்: 1 வி;

-moz- அனிமேஷன்-காலம்: 1 வி;

-ms- அனிமேஷன்-காலம்: 1 வி;

-o- அனிமேஷன்-காலம்: 1 வி;

அனிமேஷன்-காலம்: 1 வி;

-வெப்கிட்-அனிமேஷன்-நிரப்பு முறை: இரண்டும்;

-moz-animation-fill-mode: இரண்டும்;

-ms-animation-fill-mode: இரண்டும்;

-o-animation-fill-mode: இரண்டும்;

அனிமேஷன்-நிரப்பு முறை: இரண்டும்;

}

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

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