எப்படி CSS1 அனிமேஷன்கள் நன்றாக பயன்படுத்த வேண்டும்: பயிற்சி, மாதிரி குறியீடுகள், மற்றும் எடுத்துக்காட்டுகள்

எழுதிய கட்டுரை:
  • இணைய வடிவமைப்பு
  • புதுப்பிக்கப்பட்டது: ஆகஸ்ட் 29, 2011

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

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

ஒரு இருக்கை, நீங்கள் எதாவது மற்றும் ஒரு உண்மையான உலாவி (ஏதாவது ஆனால் IE) அடைய மற்றும் தொடங்குவோம்.

உற்சாகம்

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

  • அவை வேகமானவையாக இருக்கின்றன, ஏனென்றால் அவை வன்பொருள் முடுக்கம் (HTML5 செயலாக்கங்கள்)
  • மொபைல் சாதனங்களில் அவை சிறப்பாக செயல்படுகின்றன, மேலும் தொடு நிகழ்வுகளைத் தடமறிய குறிப்பிட்ட குறியீடு தேவையில்லை
  • JS உலாவி மூலம் புரிந்து கொள்ள வேண்டும் மற்றும் உலாவி உடைக்க சாத்தியங்கள் மிகவும் பெரியது. எனவே JS தோல்வியடையும் போது, ​​JS முழு பக்கத்தையும் உடைக்க முடியும் போது அது அமைதியாக தோல்வியடையும்
  • அவர்கள் மிகவும் நல்ல உலாவி ஆதரவு (இந்த தளத்தில் நீங்கள் குறிப்பிட்ட புள்ளிவிவரங்கள் சரிபார்க்க உதவும்: http://caniuse.com/#search )

CSS அனிமேஷன்களுக்கான எடுத்துக்காட்டுகள்

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

தூய CSS ட்விட்டர் தோல்வி தோல்வி

அனிமேஷன் தோல்வியடைந்தது திமிங்கிலம்

ஸ்டீவன் டென்னிஸ், இதை செயல்பாட்டில் காணவும்.

தூய CSS ஸ்க்ரோலிங் கோக் முடியுமா
CSS 3 அனிமேஷன் எடுத்துக்காட்டுகள்: ஸ்க்ரோலிங் கோக் முடியுமா

ரோமன் கார்டேஸ் தயாரித்த, இதை செயல்பாட்டில் காணவும்.

தூய CSS நடைபயிற்சி நாயகன்

CSS 3 அனிமேஷன் எடுத்துக்காட்டுகள்: வாக்கிங் மேன்

ஆண்ட்ரூ ஹோயர், இதை செயல்பாட்டில் காணவும்.

உங்கள் கைகளை அழுத்துங்கள்

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

#test {
	background: red;
}
#test:hover {
	background: green;
}
#test:active {
	background: blue;
}
#test:target {
	background: black;
}

நமக்கு வேறு சில போலி வகுப்புகள் உள்ளன, ஆனால் உங்களுக்கு யோசனை கிடைத்தது! எனவே #test உறுப்பு (இது ஒரு இணைப்பு எனக் கருதும்) என்பதைக் கிளிக் செய்தால் என்ன ஆகும்?

  • இயல்பான நிலை: பின்னணி சிவப்பு
  • மிதவை: சுட்டி உறுப்பு பகுதிக்குள் நுழைகையில், அது ஒரு பச்சை பின்னணியைக் கொண்டிருக்கும்
  • செயலில்: நீங்கள் அதை கர்சரை சொடுக்கும் போது, ​​சுட்டி பொத்தானை அழுத்தினால் பின்னணி நிறம் நீலமாக இருக்கும்
  • இலக்கு: தற்போதைய பக்கத்தின் URL இல் # உரையை கொண்டிருக்கும்போது, ​​இந்த உறுப்பு கருப்பு நிறமாக இருக்கும்

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

<a href='#test'>activate</a>
<a href='#'>deactivate</a>

CSS மாற்றங்கள்

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

.test {
	/*transition-property duration timing-function,*/
	color: blue;
	transition: color 2s, font-size 2s ease-out;
}
.test:hover {
	color: red;
}
.test:active {
	font-size: 200%;
}

நீ பசுவைப் பற்றிக் கொண்டால், அது நீலத்திலிருந்து சிவப்பு நிறத்தில் படிப்படியாக மாறிக்கொண்டே இருக்கும் (என்ன ஒரு நல்ல தட்டு, ஹூ?). நீங்கள் உறுப்பை சொடுக்கும் போது, ​​எழுத்துரு அளவு படிப்படியாக இயல்பு எழுத்துரு எழுத்துருவின் 200% க்கு அதிகரிக்கும்.

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

  • லீனியர்: தொடக்கம் முதல் இறுதிவரை ஒரே வேகம்
  • எளிதில்: மெதுவாக தொடக்கம்
  • எளிதானது: மெதுவான முடி
  • எளிதாக: நடுத்தர தொடக்கத்தில், நடுத்தர வேகமாக, பின்னர் மெதுவாக இறுதியில்
  • எளிதில் வெளியேறு: மெதுவான தொடக்கம், மெதுவான முடிவை
  • கன- bezier (ஒரு, பி, சி, ஈ): விருப்ப வேகம்

கனமான Bezier செயல்பாடு அனிமேஷன் வேகம் எக்ஸ் காலத்திற்கு கணித வளைவை குறிக்கும் 4 முதல் 0 வரை வேறுபடுகிறது என்று 1 எண்கள் ஒரு தனிபயன் அனிமேஷன் உருவாக்கும்.

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

div {
	width: 400px;
	-o-transition: width 2s;
	-moz-transition: width 2s;
	-webkit-transition: width 2s;
	transition: width 2s;
}

மேலும், உலாவி அகலத்தை (மொபைல் சாதனங்கள், டேப்லட்கள்) பொறுத்து பல்வேறு மாற்றங்களை வரையறுக்க ஊடக வினவல்களைப் பயன்படுத்தலாம். இது ஒரு எளிய எடுத்துக்காட்டு:

body {
	font-size: 1em;
}
@media screen and (max-width: 800px) {
	body {
		font-size: 0.8em;
}
}
@media screen and (max-width: 400px) {
	body {
		Font-size: 0.7em;
	}
}

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

body {
	-o-transition: font-size .5s linear;
	-moz-transition: font-size .5s linear;
	-webkit-transition: font-size .5s linear;
	transition: font-size .5s linear;
}

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

CSS அனிமேஷன் - ரியல் வேடிக்கை துவங்குகிறது

அனிமேஷன் ஒரு தேர்வுக்குழு வரையறுக்கப்பட்ட மாற்றங்கள் ஒரு வரிசை. CSS அனிமேஷன்களை வரையறுக்க நீங்கள் 2 படிகளைப் பின்பற்ற வேண்டும்.

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

/*the same code for each vendor*/
@-o-keyframe my-animation { ...
@-moz-keyframe my-animation { ...
@-webkit-keyframe my-animation { ...
/*animation name*/
@keyframe my-animation {
	/*frame selector*/
	0% {
		/*frame style*/
		Left: 0px;
		Top: 0px;
	}
	25% {
		Left: 200px;
		Top: 0px;
	}
	50% {
		Left: 200px;
		Top: 200px;
	}
	75% {
		Left: 0px;
		Top: 200px;
	}
	100% {
		Left: 0px;
		Top: 0px;
	}
}

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

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

அதை பயன்படுத்த நாம் அனிமேஷன் சொத்து பயன்படுத்த வேண்டும் மற்றும் அது 9 துணை பண்புகள் உள்ளன:

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

இது பக்கத்தின் இலக்காக இருக்கும்போது இது #test உறுப்புக்கு எங்கள் அனிமேஷன் பயன்படுத்தப்படும்:

#test:target {
	/*animation-name | duration | timing-function | delay  |iteration-count | direction | play-state */
	animation: my-animation 10s linear 0s infinite normal running;
}

இந்த மனதில் நாம் ஒரு சில அற்புதமான உதாரணங்கள் உருவாக்க முடியும்.

CSS மட்டும் துருத்தி

நாம் CSS அனிமேஷன்களைப் பயன்படுத்தி மடங்கு பேனல்களை உருவாக்குவோம். இங்கே அடிப்படை HTML அமைப்பு:

<div class="accordion">
	<a href="#tab1">Tab 1</a><div id="tab1"><p>TEXT 1</p></div>
	<a href="#tab2">Tab 2</a><div id="tab2"><p>TEXT 2</p></div>
	<a href="#tab3">Tab 3</a><div id="tab3"><p>TEXT 3</p></div>
</div>

இது பேனல்கள் மற்றும் இணைப்புகளை ஒவ்வொன்றாக உருவாக்கும் இணைப்பை உருவாக்குகிறது. மாய நடக்கும் இடம் இங்குதான்:

/* any div that is inside of the accordion*/
.accordion div  {
	/*is hidden by default */
	height: 0;
	overflow: hidden;
	/* the black magic */
	transition: height 1s;
}
	/*when the mentioned div is the target */
	.accordion div:target {
		/*height:auto won’t work, but this will work fine*/
		height: 80px;
	}

அழகான எளிய, ஹ்ஹூ? உங்கள் முழு வாழ்க்கையையும் JS ஐப் பயன்படுத்தி செலவிட்டிருக்கிறீர்களா? :)

Submenus கொண்டு CSS மட்டுமே பட்டி

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

<nav>
	<ul>
		<li><a href='#item1'>Item 1</a><div><ul>
			<li><a href='#item11'>Item 1.1</a></li>
			<li><a href='#item12'>Item 1.2</a></li>
		</ul></div></li>
		<li><a href='#item2'>Item 2</a><div><ul>
			<li><a href='#item21'>Item 2.1</a></li>
			<li><a href='#item22'>Item 2.2</a></li>
		</ul></div></li>
	</ul>
</nav>

மற்றும் மந்திரவாதி இங்கே தொடங்குகிறது:

a {
	/* just making the links a tad better */
	display: block;
	padding: 4px;
}
nav {
	text-align: center;
}
	/* any menu (including the main one)*/
	nav ul {
		display: inline-block;
		list-style: none;
	}
		nav>ul>li {
			/* horizontal items (vertical will work fine too) */
			float: left;
		}
			nav li div {
				/*collapsing any sub-menu*/
				height: 0;
				overflow: hidden;
				/* Houdini feelings */
				transition: height 1s;
			}
			nav li:hover>div {
				height: 56px;
			}

சுருக்கமாகக்

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

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

ரோசெஸ்டர் ஒலிவேரா பற்றி

நான் இன்ஜபுபா (எம்.ஜி.), பிரேசிலில் இருந்து ஒரு வலை வடிவமைப்பாளர் மற்றும் தொழில் முனைவர். நான் முட்டாள்தனமான தலைப்புகள் பற்றி எழுதும் சில நல்ல விஷயங்களை செய்வதை விரும்புகிறேன்.

நான்"