މިކަން ތަޞައްވުރު ކޮށްލައްވާ: އާ ޕްރޮޖެކްޓަކާ ގުޅިގެން، ކޯޑްބޭސް އަށް ފީނައިގެން، ފުރަތަމަ މަދު ގަޑިއިރުތަކުގެ ތެރޭގައި، މާޔޫސް ކުރުވަނިވި ގޮތަކަށް ދަންނަ އެއްޗެއް ހޯދިދާނެއެވެ. މުޅި ސްޓައިލްޝީޓްތަކުގައި އެކި ދިމަދިމާލުގައި، އެއް އަސާސީ އެނިމޭޝަންތަކަށް ގިނަ @keyframes ޑެފިނިޝަންތަކެއް ފެނެއެވެ. ތަފާތު ތިން ފޭޑް-އިން އިފެކްޓްސް، ދެ ނުވަތަ ތިން ސްލައިޑް ވެރިއޭޝަން، އަތްމަތި ދަތި ޒޫމް އެނިމޭޝަން، އަދި މަދުވެގެން ތަފާތު ދެ ސްޕިން އެނިމޭޝަން ސަބަބަކީ، ހެޔޮ، ކީއްވެގެން ހެއްޔެވެ؟ @ކީފްރޭމްސް ޕަލްސް { އިން { ސްކޭލް: 1؛ } އަށް { ސްކޭލް: 1.1؛ } }
@keyframes ބޮޑު-ޕަލްސް { 0%، 20%، 100% { ސްކޭލް: 1؛ } 10%، 40% { ސްކޭލް: 1.2؛ } }
މި މަންޒަރު އާދަޔާ ޚިލާފު ކަމަށް ހީވާނަމަ، ތިބާ އެކަނިވެރިއެއް ނޫނެވެ. އެކި ޕްރޮޖެކްޓްތަކުގެ ތެރެއިން އަޅުގަނޑަށް ލިބިފައިވާ ތަޖުރިބާއިން، އަޅުގަނޑަށް ފޯރުކޮށްދެވޭނެ އެންމެ އެއްގޮތަކަށް އަވަސް ކާމިޔާބީއަކީ، ކީފްރޭމްތައް އެއްކޮށް ސްޓޭންޑަރޑައިޒް ކުރުމެވެ. އެއީ އިތުބާރު ހުރި އުސޫލަކަށް ވެގެން ގޮސްފައިވާތީ، މިހާރު އަހަރެން އިންތިޒާރު ކުރަނީ މި ސާފުކުރުމަކީ ކޮންމެ އާ ކޯޑްބޭސްއެއްގައި އަހަރެންގެ ފުރަތަމަ އެއް މަސައްކަތުގެ ގޮތުގައެވެ. ދަ ލޮޖިކް ބިހައިންޑް ދަ ޗޭއޯސް މި ރިޑަންޑަންސީ ވިސްނާލުމުން ފުރިހަމަ މާނައެއް ދޭހަވެއެވެ. އަޅުގަނޑުމެން އެންމެންވެސް އަޅުގަނޑުމެންގެ ދުވަހުން ދުވަހަށް ކުރާ މަސައްކަތުގައި ބޭނުންކުރަނީ އެއް އަސާސީ އެނިމޭޝަންތަކެއް: ފޭޑްސް، ސްލައިޑްސް، ޒޫމްސް، ސްޕިންސް، އަދި އެހެނިހެން އާންމު އިފެކްޓްސް. މި އެނިމޭޝަންތަކަކީ ކިތަންމެހާވެސް ސީދާ އެނިމޭޝަންތަކެއް ކަމަށާއި، މަސައްކަތް ނިންމުމަށްޓަކައި އަވަސް @keyframes ޑެފިނިޝަނެއް ވިޕް އަޕް ކުރަން ފަސޭހަ ކަމަށެވެ. މަރުކަޒީ އެނިމޭޝަން ސިސްޓަމެއް ނެތި، ޑިވެލޮޕަރުން ގުދުރަތީ ގޮތުން މި ކީފްރޭމްތައް ސުމެއްގައި ލިޔަނީ، ކޯޑްބޭސްގެ އެހެން ތަންތަނުގައި ވެސް މިފަދަ އެނިމޭޝަންތައް މިހާރު ހުރިކަން ނޭނގިގެންނެވެ. މިއީ ޚާއްޞަކޮށް ކޮމްޕޮނެންޓް ބެސްޓް އަރކިޓެކްޗަރސްގައި މަސައްކަތް ކުރާއިރު (މިދުވަސްވަރު އަޅުގަނޑުމެންގެ ތެރެއިން ގިނަ ބަޔަކު ކުރާ ކަމެއް) އާންމު ކަމަކަށް ވާއިރު، ގިނަ ފަހަރަށް ޓީމްތައް މަސައްކަތް ކުރަނީ އެޕްލިކޭޝަންގެ އެކި ބައިތަކުގައި ޕެރެލަލް ވެގެންނެވެ. ނަތީޖާ؟ އެނިމޭޝަން ހަލަބޮލިކަމެވެ. ކުޑަ މައްސަލަ ކީފްރޭމްސް ޑަޕްލިކޭޝަން އަށް ދިމާވާ އެންމެ ފާހަގަކޮށްލެވޭ މައްސަލަތަކަކީ ޑިވެލޮޕްމަންޓް ވަގުތު ބޭކާރުވުމާއި ކޮންމެހެން ބޭނުން ނުވާ ކޯޑް ބްލޮޓް ކުރުމެވެ. މަލްޓިޕަލް ކީފްރޭމް ޑެފިނިޝަންސްގެ މާނައަކީ ޝަރުތުތައް ބަދަލުވާ ވަގުތު އަޕްޑޭޓް ކުރަންޖެހޭ އެތައް ތަނެއް. ތިބާގެ ފޭޑް އެނިމޭޝަންގެ ޓައިމިން އެޖެސްޓް ކުރަން ޖެހޭނެ ހެއްޔެވެ؟ ތިބާގެ ކޯޑްބޭސް ހުރަސްކޮށް ކޮންމެ އިންސްޓޭންސެއް ޝިކާރަ ކުރަން ޖެހޭނެއެވެ. ލުއިކުރުމުގެ ފަންކްޝަންތައް ސްޓޭންޑަރޑައިޒް ކުރަން ބޭނުން ހެއްޔެވެ؟ ހުރިހާ ވައްތަރުތަކެއް ހޯދައިގެން ނަސީބު ރަނގަޅު. މި މެއިންޓެނަންސް ޕޮއިންޓްތައް ގިނަވުމުން އާދައިގެ އެނިމޭޝަން އަޕްޑޭޓްތަކަކީ ވެސް ވަގުތު ނަގާ މަސައްކަތަކަށް ވެގެންދެއެވެ. ބޮޑު މައްސަލަ މި ކީފްރޭމްސް ޑަޕްލިކޭޝަންގެ ސަބަބުން ބިމުގެ ދަށުގައި ފޮރުވިފައި އޮންނަ މިއަށްވުރެ މާ އިންސިޑިއަސް މައްސަލައެއް އުފެދެއެވެ: އެއީ ގްލޯބަލް ސްކޯޕް ޓްރެޕް އެވެ. ކޮމްޕޮނެންޓް ބެސްޓް އަރކިޓެކްޗަރސް އާއި އެކު މަސައްކަތް ކުރާއިރުވެސް، ސީއެސްއެސް ކީފްރޭމްސް އަބަދުވެސް ކަނޑައެޅިފައިވަނީ ގްލޯބަލް ސްކޯޕްގައެވެ. މާނައަކީ ހުރިހާ ކީފްރޭމްތަކެއް ހުރިހާ ކޮމްޕޯނެންޓްތަކަށް ވެސް އަމަލުކުރެވޭނެއެވެ. އަބަދުވެސް. އާދެ، ތިބާގެ އެނިމޭޝަންގައި ކޮންމެހެން ތިބާގެ ކޮމްޕޮނެންޓްގައި ކަނޑައެޅިފައިވާ ކީފްރޭމްތައް ބޭނުން ނުކުރެއެވެ. އެއީ ގްލޯބަލް ސްކޯޕަށް ލޯޑް ކުރެވުނު ސީދާ އެ ނަމާއި ގުޅޭ އެންމެ ފަހުގެ ކީފްރޭމްތައް ބޭނުންކުރާ އެއްޗެކެވެ. ތިބާގެ ހުރިހާ ކީފްރޭމްތަކެއް އެއްގޮތް ހުރިހާ ހިނދަކު މިއީ ކުޑަ މައްސަލައެއް ކަމުގައި ހީވެދާނެއެވެ. އެކަމަކު ވަކި ޔޫސް ކޭސްއަކަށް އެނިމޭޝަނެއް ކަސްޓަމައިޒް ކުރަން ބޭނުންވާ ހިސާބުން، ތިމާއަށް އުނދަގޫތަކެއް ކުރިމަތިވެ، ނުވަތަ އެއަށްވުރެ ގޯސްކޮށް، އެކަންކަން މެދުވެރިވާ މީހަކީ ތިމާއެވެ. ނުވަތަ ތިބާގެ އެނިމޭޝަން މަސައްކަތް ނުކުރާނީ ތިބާގެ އެނިމޭޝަން އަށް ފަހު އެހެން ކޮމްޕޮނެންޓެއް ލޯޑްވެ، ތިބާގެ ކީފްރޭމްތައް އޯވަރރައިޓް ވުމުން، ނުވަތަ ތިބާގެ ކޮމްޕޮނެންޓް އެންމެ ފަހުން ލޯޑްވެ، އެ ކީފްރޭމްގެ ނަން ބޭނުންކޮށްގެން އެހެން ކޮންމެ ކޮމްޕޮނެންޓެއްގެ އެނިމޭޝަން ސުލޫކު ގޯސްކޮށް ބަދަލުވުމުންނެވެ. މިއީ މައްސަލަ ދައްކުވައިދޭ ސާދާ މިސާލެކެވެ. .ކޮމްޕޮނެންޓް-އެއް { /* ކޮމްޕޮނެންޓް ސްޓައިލްސް */ އެނިމޭޝަން: ޕަލްސް 1s އީޒް-އިން-އައުޓް އިންފިނިޓް އެލްޓަނޭޓް؛ }
/* މި @keyframes ޑެފިނިޝަން މަސައްކަތް ނުކުރާނެ */ @ކީފްރޭމްސް ޕަލްސް { އިން { ސްކޭލް: 1؛ } އަށް { ސްކޭލް: 1.1؛ } }
/* ފަހުން ކޯޑުގައި... */
.ކޮމްޕޮނެންޓް-ޓޫ { /* ކޮމްޕޮނެންޓް ސްޓައިލްސް */ އެނިމޭޝަން: ޕަލްސް 1s އީޒް-އިން-އައުޓް އިންފިނިޓް؛ }
/* މި ކީފްރޭމްސް ދެ ކޮމްޕޮނެންޓަށް ވެސް އަމަލުކުރެވޭނެ */ @ކީފްރޭމްސް ޕަލްސް { 0%، 20%، 100% { ސްކޭލް: 1؛ } 10%، 40% { ސްކޭލް: 1.2؛ } }
ދެ ކޮމްޕޯނެންޓް ވެސް ބޭނުންކުރަނީ އެއް އެނިމޭޝަން ނަމެއް ނަމަވެސް ދެވަނަ @keyframes ޑެފިނިޝަން ފުރަތަމަ އެއްޗެއް އޯވަރރައިޓް ކުރެއެވެ. މިހާރު ކޮމްޕޮނެންޓް-ވަން އަދި ކޮމްޕޮނެންޓް-ޓޫ ވެސް ބޭނުންކުރާނީ ދެވަނަ ކީފްރޭމް، ކޮން ކޮމްޕޮނެންޓެއް ކަނޑައެޅީ ކޮން ކީފްރޭމްތަކެއް ކަމުގައި ވިޔަސް. ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 1 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. އެންމެ ނުބައި ބައިތަ؟ މިއީ ގިނަ ފަހަރަށް ލޯކަލް ޑިވެލޮޕްމަންޓްގައި ފުރިހަމައަށް މަސައްކަތްކުރާ ކަމެއް ނަމަވެސް ބިލްޑް ޕްރޮސެސްތަކުން ތިބާގެ ސްޓައިލްޝީޓްތަކުގެ ލޯޑިންގ އޯޑަރ ބަދަލުވުމުން ޕްރޮޑަކްޝަންގައި މިސްޓޭރިއަސްކޮށް ފަޅައިގެންދެއެވެ. ނިމުމަކަށް އަންނަނީ ކޮން ކޮމްޕޯނެންޓްތަކެއް ލޯޑް ކުރެވޭ ގޮތާއި ކޮން ސިކުނޑިއެއްގައިތޯ ބަލާފައި ތަފާތު ގޮތަކަށް ކަންތައް ކުރާ އެނިމޭޝަންތަކެކެވެ. ހައްލު: ޔުނިފައިޑް ކީފްރޭމްސް މި ހަލަބޮލިކަމުގެ ޖަވާބަކީ ހައިރާން ކުރުވަނިވި ސާދާ ޖަވާބެއް: ޝެއަރޑް ސްޓައިލްޝީޓެއްގައި ރައްކާކޮށްފައިވާ ކުރިން ކަނޑައެޅިފައިވާ ޑައިނަމިކް ކީފްރޭމްތަކެކެވެ. ކޮންމެ ކޮމްޕޮނެންޓެއްގެ އަމިއްލަ އެނިމޭޝަންތައް ކަނޑައެޅުމުގެ ބަދަލުގައި، އަޅުގަނޑުމެން އުފައްދަނީ ރަނގަޅަށް ލިޔެކިޔުންތައް ހުރި، ފަސޭހައިން ކުރެވޭ މަރުކަޒީ ކީފްރޭމްތަކެކެވެބޭނުންކުރެވޭ، ބެލެހެއްޓޭނެ، އަދި ތިމާގެ ޕްރޮޖެކްޓްގެ ވަކި ބޭނުންތަކަށް ޚާއްޞަ ކުރެވިފައިވާ ތަކެތި. އެއީ ކީފްރޭމްސް ޓޯކަންތަކެއްގެ ގޮތުގައި ވިސްނާށެވެ. ކުލަތަކާއި ސްޕޭސިންގ އަށް ޓޯކަން ބޭނުންކުރާ ފަދައިން، އަދި އަޅުގަނޑުމެންގެ ތެރެއިން ގިނަ ބަޔަކު މިހާރުވެސް އެނިމޭޝަން ޕްރޮޕަޓީތަކަށް ޓޯކަން ބޭނުންކުރާ ފަދައިން، މުއްދަތާއި ލުއިކުރުމުގެ ފަންކްޝަންތައް ފަދަ ކަންކަމުގައި، ކީފްރޭމްތަކަށް ވެސް ޓޯކަން ބޭނުން ނުކުރަނީ ކީއްވެގެން ހެއްޔެވެ؟ މި އުސޫލުން ތިބާ ބޭނުންކުރާ މިހާރުގެ ކޮންމެ ޑިޒައިން ޓޯކަން ވޯކްފްލޯއަކާ ގުދުރަތީ ގޮތުން އިންޓަގްރޭޓް ކުރެވޭއިރު، ކުޑަ މައްސަލަ (ކޯޑް ޑަޕްލިކޭޝަން) އާއި ބޮޑު މައްސަލަ (ގްލޯބަލް ސްކޯޕް ކޮންފްލިކްޓްސް) ވެސް އެއްފަހަރާ ހައްލުކުރެވޭނެ އެވެ. އެ ޚިޔާލަކީ ސީދާ ޚިޔާލެއް: އަޅުގަނޑުމެންގެ ހުރިހާ އާންމު އެނިމޭޝަންތަކަށް ޙަޤީޤަތުގެ އެއް މަސްދަރެއް އުފެއްދުން. މި ޝެއަރޑް ސްޓައިލްޝީޓްގައި އަޅުގަނޑުމެންގެ ޕްރޮޖެކްޓުން ހަގީގަތުގައި ބޭނުންކުރާ އެނިމޭޝަން ޕެޓަރންތައް ކަވަރުކުރާ ފަރުވާތެރިކަމާއެކު ތައްޔާރުކޮށްފައިވާ ކީފްރޭމްތައް ހިމެނެއެވެ. އަޅުގަނޑުމެންގެ ކޯޑްބޭސްގެ ކޮންމެވެސް ތަނެއްގައި ފޭޑް އެނިމޭޝަނެއް މިހާރުވެސް ހުރިތޯ އިތުރަށް ލަފާ ނުކުރެވޭނެއެވެ. އިތުރަށް އެކްސިޑެންޓްވެގެން އެހެން ކޮމްޕޯނެންޓްތަކުން އެނިމޭޝަންތައް އޯވަރރައިޓް ނުކުރުން. އެކަމަކު މިއޮތީ ތަޅުދަނޑި: މިއީ ހަމައެކަނި ސްޓޭޓިކް ކޮޕީ-ޕޭސްޓް އެނިމޭޝަންތަކެއް ނޫނެވެ. އެއީ ސީއެސްއެސް ކަސްޓަމް ޕްރޮޕަޓީސް މެދުވެރިކޮށް ޑައިނަމިކް އަދި ކަސްޓަމައިޒް ކުރެވޭ ގޮތަށް ފަރުމާކޮށްފައިވާ އެއްޗެހި ކަމުން، އެއްތަނެއްގައި ތަންކޮޅެއް ބޮޑު “ޕަލްސް” އެނިމޭޝަނެއް ބޭނުންވާނަމަ ފަދަ ވަކި ޔޫސް ކޭސްތަކަށް އެނިމޭޝަންތައް އެޑެޕްޓް ކުރުމުގެ ފްލެކްސިބިލިޓީ އަދިވެސް ލިބިގެންދާއިރު ކޮންސިސްޓެންސީ ބެލެހެއްޓޭނެ އެވެ. ބިލްޑިންގ ދަ ފަސްޓް ކީފްރޭމްސް ޓޯކަން އަޅުގަނޑުމެން ފުރަތަމަ ލޯ ހޭންގް ކުރާ މޭވާތަކުގެ ތެރެއިން އެއް މޭވާއަކީ “ފޭޑް-އިން” އެނިމޭޝަން އެވެ. އަޅުގަނޑުގެ ފަހުގެ އެއް ޕްރޮޖެކްޓެއްގައި، އަޅުގަނޑަށް ވަކިވަކިން ދިހަވަރަކަށް ވުރެ ގިނަ ފޭޑް-އިން ޑެފިނިޝަން ފެނިފައި، އަދި އާދެ، އެ ހުރިހާ އެއްޗެއްވެސް ފަސޭހައިން އޮޕަސިޓީ 0 އިން 1 އަށް އެނިމޭޓް ކުރިއެވެ. އެހެންކަމުން، އާ ސްޓައިލްޝީޓެއް އުފައްދައި، kf-tokens.css އޭ ކިޔައި، އަޅުގަނޑުމެންގެ ޕްރޮޖެކްޓަށް އިމްޕޯޓްކޮށް، އޭގެ ތެރޭގައި ރަނގަޅު ކޮމެންޓްތަކާއެކު އަޅުގަނޑުމެންގެ ކީފްރޭމްތައް ބަހައްޓަމާ ހިނގާށެވެ. /* ކީފްރޭމްސް-ޓޯކެންސް.ސީއެސްއެސް */
/* * ފޭޑް އިން - ފޭޑް އެންޓްރެންސް އެނިމޭޝަން * ބޭނުންކުރުން: އެނިމޭޝަން: kf-fade-in 0.3s އީޒް-އައުޓް؛ */ @ކީފްރޭމްސް ކޭއެފް-ފޭޑް-އިން { އިން { އޮޕަސިޓީ: 0؛ } އަށް { އޮޕަސިޓީ: 1؛ } }
މި އެއް @keyframes ޑިކްލެރޭޝަން އަކީ އަޅުގަނޑުމެންގެ ކޯޑްބޭސް ހުރަސްކޮށް އެ ހުރިހާ ސްކެޓަރޑް ފޭޑް-އިން އެނިމޭޝަންތަކުގެ ބަދަލުގައި ގެނެސްދޭ އެއްޗެކެވެ. ސާފު، ސާދާ، އަދި ދުނިޔޭގެ ފެންވަރުގައި ވެސް އަމަލުކުރެވޭނެ އެއްޗެކެވެ. އަދި މިހާރު އަޅުގަނޑުމެންނަށް މި ޓޯކަން ކަނޑައެޅިފައި އޮތުމުން، އަޅުގަނޑުމެންގެ މުޅި ޕްރޮޖެކްޓްގައި ކޮންމެ ކޮމްޕޮނެންޓަކުންވެސް ބޭނުންކުރެވޭނެ: .މޯޑަލް { . އެނިމޭޝަން: kf-fade-in 0.3s ފަސޭހަ-އައުޓް؛ }
.ޓޫލްޓިޕް { . އެނިމޭޝަން: kf-fade-in 0.2s ފަސޭހަ-އިން-އައުޓް؛ }
.ނޮޓިފިކޭޝަން { އެނިމޭޝަން: kf-fade-in 0.5s ފަސޭހަ-އައުޓް؛ }
ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 2 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. ނޯޓް: އަޅުގަނޑުމެންގެ ހުރިހާ @keyframes ނަމެއްގައި އަޅުގަނޑުމެން ބޭނުންކުރަނީ kf- ޕްރިފިކްސްއެކެވެ. މި ޕްރިފިކްސް އަކީ ޕްރޮޖެކްޓްގައި ހުރި އެނިމޭޝަންތަކާ ނަން ދިނުމުގެ ފުށުއެރުންތައް ހުއްޓުވައި، މި ކީފްރޭމްތައް އަންނަނީ އަޅުގަނޑުމެންގެ ކީފްރޭމްސް ޓޯކަންސް ފައިލް އިންކަން ވަގުތުން ސާފުކޮށްދޭ ނަންސްޕޭސްއެއްގެ ގޮތުގައެވެ. ޑައިނަމިކް ސްލައިޑެއް ހެދުން ކޭއެފް-ފޭޑް-އިން ކީފްރޭމްތައް މޮޅު މަސައްކަތް ކުރަނީ އެއީ ސާދާ އެއްޗަކަށް ވާތީ އާއި ކަންކަން ގޯސްކޮށްލުމަށް ޖާގަ ކުޑަ ކަމުންނެވެ. ނަމަވެސް އެހެން އެނިމޭޝަންތަކުގައި އަޅުގަނޑުމެންނަށް މާ ޑައިނަމިކް ވާން ޖެހޭއިރު، މިތަނުގައި އަޅުގަނޑުމެންނަށް ސީއެސްއެސް ކަސްޓަމް ޕްރޮޕަޓީސްގެ ބޮޑު ބާރު ލީވަރ ކުރެވޭނެއެވެ. މިއީ ސްކެޓަރޑް ސްޓޭޓިކް އެނިމޭޝަންތަކާ އަޅާބަލާއިރު ކީފްރޭމްސް ޓޯކަންތައް ހަގީގަތުގައި ވިދާލާ ތަނެވެ. އާންމު މަންޒަރެއް ނަގާލަމާ: “ސްލައިޑް-އިން” އެނިމޭޝަންސް. އެކަމަކު ސްލައިޑް އިން ކޮށްލަނީ ކޮންތާކުން ހެއްޔެވެ؟ ކަނާތްފަރާތުން 100px ހެއްޔެވެ؟ ކަނާތްފަރާތުން %50 ހެއްޔެވެ؟ ސްކްރީންގެ މަތިން ވަންނަންވީ ހެއްޔެވެ؟ ނުވަތަ ތިރިން ފްލޯޓް އިން ވެދާނެ ހެއްޔެވެ؟ އެހާ ގިނަ ފުރުސަތުތަކެއް، އެކަމަކު ކޮންމެ ދިމާލަކާއި ކޮންމެ ވައްތަރަކަށް ވަކި ކީފްރޭމްތައް އުފެއްދުމުގެ ބަދަލުގައި، ހުރިހާ މަންޒަރުތަކަށް ވެސް އެޑެޕްޓްވާ އެއް ފްލެކްސިބަލް ޓޯކަން ބިނާކުރެވިދާނެ އެވެ: /* * ސްލައިޑް އިން - ޑިރެކްޝަނަލް ސްލައިޑް އެނިމޭޝަން * މިސްރާބު ކޮންޓްރޯލް ކުރުމަށް --kf-slide-from ބޭނުން ކުރާށެވެ * ޑިފޯލްޓް: ކަނާތްފަރާތުން ސްލައިޑް އިން (-100%) * ބޭނުންކުރުން: * އެނިމޭޝަން: kf-slide-in 0.3s ފަސޭހަ-އައުޓް؛ * --kf-slide-from: -100px 0؛ // ކަނާތްފަރާތުން ސްލައިޑް ކޮށްލާށެވެ * --kf-slide-from: 100px 0؛ // ކަނާތްފަރާތުން ސްލައިޑް ކޮށްލާށެވެ * --kf-slide-from: 0 -50px؛ // މަތިން ސްލައިޑް ކޮށްލާށެވެ */
@ކީފްރޭމްސް kf-slide-in { އިން { ތަރުޖަމާކުރުން: var(--kf-slide-from, -100% 0); } އަށް { ތަރުޖަމާކުރުން: 0 0؛ } }
މިހާރު އަޅުގަނޑުމެންނަށް މި އެއް @keyframes ޓޯކަން ކޮންމެ ސްލައިޑް ޑިރެކްޝަނަކަށް ބޭނުންކުރެވޭނީ ހަމައެކަނި --kf-slide-from ކަސްޓަމް ޕްރޮޕަޓީ ބަދަލުކޮށްގެންނެވެ: .ސައިޑްބާރ { . އެނިމޭޝަން: kf-slide-in 0.3s ފަސޭހަ-އައުޓް؛ /* ޑިފޯލްޓް ވެލިއު ބޭނުންކުރަނީ: ކަނާތްފަރާތުން ސްލައިޑްތައް */ }
.ނޮޓިފިކޭޝަން { އެނިމޭޝަން: kf-slide-in 0.4s ފަސޭހަ-އައުޓް؛ --kf-slide-from: 0 -50px؛ /* މަތިން ސްލައިޑް ކޮށްލައްވާ */ }
.މޯޑަލް { . އެނިމޭޝަން: ކޭއެފް-ފޭޑް-އިން 0.5s، ކޭއެފް-ސްލައިޑް-އިން 0.5s ކިއުބިކް-ބެޒިއަރ(0.34، 1.56، 0.64، 1)؛ --kf-slide-from: 50px 50px؛ /* ތިރީ-ވާތްފަރާތުން ސްލައިޑް */ }
މި އުސޫލުން އަޅުގަނޑުމެންނަށް ގަބޫލުނުކުރެވޭފަދަ ފްލެކްސިބިލިޓީއެއް ލިބިގެންދާއިރު، އެއްގޮތްކަން ދެމެހެއްޓޭނެއެވެ. އެއް ކީފްރޭމް ޑިކްލެރޭޝަން، ނިމުމެއް ނެތް ފުރުސަތުތަކެއް. ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 3 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. އަދި އަޅުގަނޑުމެންގެ އެނިމޭޝަންތައް އިތުރަށް ފްލެކްސިބަލްކޮށް، “ސްލައިޑް އައުޓް” އިފެކްޓްސް އަށް ވެސް ފުރުސަތު ދޭން ބޭނުންނަމަ، އަޅުގަނޑުމެންނަށް ކުރެވޭނެފަސޭހައިން --kf-slide-to ކަސްޓަމް ޕްރޮޕަޓީއެއް އިތުރުކޮށް، ދެން އޮތް ބައިގައި ފެންނާނެ ގޮތާ އެއްގޮތެވެ. ބައިޑައިރެކްޝަނަލް ޒޫމް ކީފްރޭމްސް ޕްރޮޖެކްޓްތަކުގެ ތެރެއިން ޑަބިލިކޭޓް ވާ އަނެއް އާންމު އެނިމޭޝަނަކީ “ޒޫމް” އިފެކްޓްސް އެވެ. ޓޯސްޓް މެސެޖުތަކަށް ނާޒުކު ސްކޭލް އަޕް އެއް ކަމުގައި ވިޔަސް، މޮޑަލްތަކަށް ޑްރާމާ ޒޫމް-އިން އެއް ކަމުގައި ވިޔަސް، ނުވަތަ ހެޑިންގްސް އަށް މަޑުމައިތިރި ސްކޭލް ޑައުން އިފެކްޓެއް ކަމުގައި ވިޔަސް، ޒޫމް އެނިމޭޝަންތައް ހުރިހާ ތަނެއްގައި ވެސް ހުރެ އެވެ. ކޮންމެ ސްކޭލް ވެލިއުއަކަށް ވަކި ކީފްރޭމްތައް އުފެއްދުމުގެ ބަދަލުގައި، kf-zoom ކީފްރޭމްތަކުގެ އެއް ފްލެކްސިބަލް ސެޓް ބިނާކޮށްލަމާ ހިނގާށެވެ:
/* * ޒޫމް - ސްކޭލް އެނިމޭޝަން * ސްކޭލް ވެލިއުތައް ކޮންޓްރޯލް ކުރުމަށް --kf-zoom-from އަދި --kf-zoom-to ބޭނުން ކުރާށެވެ * ޑިފޯލްޓް: %80 އިން %100 އަށް (0.8 އިން 1 އަށް) ޒޫމް ކުރެވެއެވެ. * ބޭނުންކުރުން: * އެނިމޭޝަން: kf-zoom 0.2s ފަސޭހަ-އައުޓް؛ * --kf-zoom-from: 0.5؛ --kf-zoom-to: 1؛ // %50 އިން %100 އަށް ޒޫމްކުރުން * --kf-zoom-from: 1؛ --kf-zoom-to: 0؛ // 100% އިން 0% އަށް ޒޫމްކުރުން * --kf-zoom-from: 1؛ --kf-zoom-to: 1.1؛ // 100% އިން 110% އަށް ޒޫމްކުރުން */
@ކީފްރޭމްސް kf-zoom { އިން { ސްކޭލް: var(--kf-ޒޫމް-ފްރޮމް، 0.8); } އަށް { ސްކޭލް: var(--kf-ޒޫމް-ޓު، 1); } }
އެއް މާނައަކުން އަޅުގަނޑުމެންނަށް ބޭނުންވާ ކޮންމެ ޒޫމް ވެރިއޭޝަނެއް ހާސިލް ކުރެވޭނެއެވެ: .ޓޯސްޓް { . އެނިމޭޝަން: ކޭއެފް-ސްލައިޑް-އިން 0.2s، kf-zoom 0.4s ފަސޭހަ-އައުޓް؛ --kf-slide-from: 0 100%؛ /* މަތިން ސްލައިޑް ކޮށްލައްވާ */ /* ޑިފޯލްޓް ޒޫމް ބޭނުންކުރަނީ: %80 އިން %100 އަށް ސްކޭލް ކުރަނީ */ }
.މޯޑަލް { . އެނިމޭޝަން: ކޭއެފް-ޒޫމް 0.3s ކިއުބިކް-ބެޒިއަރ(0.34، 1.56، 0.64، 1); --kf-zoom-from: 0؛ /* ޑްރާމާ ޒޫމް 0% އިން 100% އަށް */ }
.ސުރުޚީ { . އެނިމޭޝަން: kf-fade-in 2s، kf-zoom 2s ފަސޭހަ-އިން؛ --kf-zoom-from: 1.2؛ --kf-zoom-to: 0.8؛ /* މަޑުމައިތިރި ސްކޭލް ޑައުން */ }
ޑިފޯލްޓް 0.8 (80%) ޓޯސްޓް މެސެޖްތަކާއި ކާޑު ފަދަ ގިނަ ޔޫއައި އެލިމެންޓްތަކަށް ފުރިހަމައަށް މަސައްކަތް ކުރާއިރު، އަދިވެސް ހާއްސަ ކޭސްތަކަށް ކަސްޓަމައިޒް ކުރަން ފަސޭހަ އެވެ. ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 4 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. ފަހުގެ މިސާލުތަކުން ޝައުގުވެރި ކަމެއް ފާހަގަ ކުރެވިދާނެ: އަޅުގަނޑުމެން މިދަނީ އެނިމޭޝަންތައް އެއްކޮށްލަމުންނެވެ. @keyframes ޓޯކަންސް އާއި އެކު މަސައްކަތް ކުރުމުގެ މުހިންމު އެއް ފައިދާއަކީ އެއީ އެކަކު އަނެކަކާ އެއްވެސް ދަތިކަމެއް ނެތި އިންޓަގްރޭޓް ކުރެވޭ ގޮތަށް ފަރުމާކޮށްފައިވާ ޓޯކަންތަކެކެވެ. މި އޮމާން ކޮމްޕޮޒިޝަނަކީ ގަސްތުގައި ކުރެވޭ ކަމެއް، އެކްސިޑެންޓެއް ނޫނެވެ. އެނިމޭޝަން ކޮމްޕޮޒިޝަން އާއި ބެހޭގޮތުން ފަހުން އިތުރަށް ތަފްސީލުކޮށް ވާހަކަ ދައްކާނަން، އެއީ މައްސަލައަކަށް ވެދާނެ ތަންތަން ހިމެނޭ ގޮތަށް ނަމަވެސް ގިނަ ކޮމްބިނޭޝަންތަކަކީ ސީދާ އަދި ތަންފީޒު ކުރަން ފަސޭހަ ކޮމްބިނޭޝަންތަކެކެވެ. ނޯޓް: މި ލިޔުން ލިޔަމުން ދިޔައިރު، އަދި ފަހަރެއްގައި ލިޔުމުގެ ސަބަބުން ވެސް، އެންޓްރެންސް އެނިމޭޝަންތަކުގެ މުޅި ޚިޔާލަށް އަލުން ވިސްނަމުން ދިޔަތަން ފެނުނެވެ. ސީއެސްއެސް އަށް ފަހުގެ ހުރިހާ ކުރިއެރުންތަކަކާއެކު، އަދިވެސް އަޅުގަނޑުމެންނަށް އެކަންކަން އެއްގޮތަކަށްވެސް ބޭނުންވޭ ހެއްޔެވެ؟ ނަސީބަކުން އޭޑަމް އާގްއިލް ވެސް ހަމަ އެ ސުވާލުތައް ތަހުގީގުކޮށް އޭނާގެ ބްލޮގުގައި ވަރަށް މޮޅަށް ފާޅުކޮށްފައިވެ އެވެ. މިއީ މިތަނުގައި ލިޔެފައިވާ އެއްޗަކާ ފުށުއަރާ ކަމެއް ނޫން ނަމަވެސް، ޚާއްޞަކޮށް ތިބާގެ ޕްރޮޖެކްޓްތައް ވަރަށް ބޮޑަށް ބަރޯސާވެފައިވަނީ އެންޓްރެންސް އެނިމޭޝަންތަކަށް ކަމަށްވާނަމަ، ވިސްނަންޖެހޭ ގޮތެއް ހުށަހަޅާފައިވެއެވެ. ކޮންޓިނިއުއަސް އެނިމޭޝަންސް “ފޭޑް”، “ސްލައިޑް”، އަދި “ޒޫމް” ފަދަ އެންޓްރެންސް އެނިމޭޝަންތައް އެއްފަހަރު ހިނގާފައި ދެން ހުއްޓާލާއިރު، މެދުނުކެނޑި އެނިމޭޝަންތައް މުއްދަތެއް ނެތް ގޮތަށް ލޫޕް ވެގެން ދަނީ ސަމާލުކަން ދަމައިގަތުމަށް ނުވަތަ ހިނގަމުންދާ ހަރަކާތްތައް ދައްކުވައިދިނުމަށެވެ. އަޅުގަނޑަށް ދިމާވާ އެންމެ އާންމުކޮށް ކޮންޓިނިއުއަސް އެނިމޭޝަން އަކީ “ސްޕިން” (ލޯޑިންގ އިންޑިކޭޓަރސް އަށް) އަދި “ޕަލްސް” (މުހިންމު އުފެއްދުންތައް ފާހަގަކުރުމަށް) އެވެ. މި އެނިމޭޝަންތަކުން ކީފްރޭމް ޓޯކަން އުފެއްދުމުގައި ތަފާތު ގޮންޖެހުންތަކެއް ކުރިމަތިވެއެވެ. އާންމުކޮށް އެއް ސްޓޭޓުން އަނެއް ސްޓޭޓަށް ދާ އެންޓްރެންސް އެނިމޭޝަންތަކާ ހިލާފަށް ކޮންޓިނިއުއަސް އެނިމޭޝަންތަކަކީ އެމީހުންގެ ސުލޫކީ އުސޫލުތަކުގައި ވަރަށް ބޮޑަށް ކަސްޓަމައިޒް ކުރެވޭ އެނިމޭޝަންތަކަކަށް ވާން ޖެހެ އެވެ. ދަ ސްޕިން ޑޮކްޓަރެވެ ކޮންމެ ޕްރޮޖެކްޓެއްގައިވެސް ގިނަ ސްޕިން އެނިމޭޝަންތައް ބޭނުންކުރާހެން ހީވެއެވެ. އެއްބަޔަކު ގަޑިއަށް އެނބުރޭއިރު އަނެއް ބަޔަކު ގަޑިއާ ދިމާ އިދިކޮޅަށް އެނބުރެއެވެ. އެއްބަޔަކު އެއްފަހަރު 360 ޑިގްރީ ރޮޓޭޝަން ކުރާއިރު، އަނެއް ބަޔަކު އެތައް ފަހަރަކު އެނބުރުން ކުރާއިރު، އެއަށްވުރެ އަވަސް އަސަރެއް ކުރާނެ އެވެ. ކޮންމެ ވައްތަރަކަށް ވަކި ކީފްރޭމްތައް އުފެއްދުމުގެ ބަދަލުގައި، ހުރިހާ މަންޒަރުތަކެއް ޙައްލުކުރާ އެއް ފްލެކްސިބަލް ސްޕިން ބިނާކޮށްލަމާ ހިނގާށެވެ:
/* * ސްޕިން - ރޮޓޭޝަން އެނިމޭޝަން * ރޮޓޭޝަން ރޭންޖް ކޮންޓްރޯލް ކުރުމަށް --kf-spin-from އަދި --kf-spin-to ބޭނުން ކުރާށެވެ * ރޮޓޭޝަންގެ މިންވަރު ކޮންޓްރޯލް ކުރުމަށް --kf-spin-turns ބޭނުން ކުރާށެވެ * ޑިފޯލްޓް: 0deg އިން 360deg އަށް އެނބުރޭ (1 ފުލް ރޮޓޭޝަން) * ބޭނުންކުރުން: * އެނިމޭޝަން: kf-spin 1s ލައިނަރ އިންފިނިޓް؛ * --kf-spin-turns: 2؛ // 2 ފުލް ރޮޓޭޝަން * --kf-spin-from: 0deg؛ --kf-spin-to: 180ޑިގްރީ؛ // ހާފް ރޮޓޭޝަން * --kf-spin-from: 0deg؛ --kf-spin-to: -360deg؛ // ގަޑިއާ ދިމާ އިދިކޮޅަށް */
@ކީފްރޭމްސް kf-spin { އިން { އެނބުރުން: var(--kf-spin-from, 0deg); } އަށް { އެނބުރޭ: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
މިހާރު އަޅުގަނޑުމެންނަށް ކަމުދާ ކޮންމެ ސްޕިން ވެރިއޭޝަނެއް އުފެއްދިދާނެއެވެ:
.ލޯޑިންގ-ސްޕިނަރ { . އެނިމޭޝަން: kf-spin 1s ލައިނަރ އިންފިނިޓް؛ /* ޑިފޯލްޓް ބޭނުންކުރަނީ: 0deg އިން 360deg އަށް އެނބުރެނީ */ }
.ފަސްޓް-ލޯޑަރ { އެނިމޭޝަން: kf-spin 1.2s އީޒް-އިން-އައުޓް އިންފިނިޓް އެލްޓަނޭޓް؛ --kf-spin-turns: 3؛ /* ސައިކަލަކަށް ކޮންމެ ދިމާލަކަށް 3 ފުލް ރޮޓޭޝަން*/ }
.ސްޓެޕްޑް-ރިވަރސް { . އެނިމޭޝަން: kf-spin 1.5s ސްޓެޕްސް(8) އިންފިނިޓް؛ --kf-spin-to: -360deg؛ /* ގަޑިއާ ދިމާ އިދިކޮޅަށް */ }
.ނާޒުކު-ވިގްލް { . އެނިމޭޝަން: kf-spin 2s އީޒް-އިން-އައުޓް އިންފިނިޓް އެލްޓަނޭޓް؛ --kf-spin-from: -16deg؛ --kf-spin-to: 32ޑިގްރީ؛ /* wiggle 36 deg: -18deg އާއި +18deg އާއި ދެމެދު */ }
ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 5 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. މި އުސޫލުގެ ރީތިކަމަކީ ސްޕިނަރސް ލޯޑްކުރުމާއި، އެނބުރޭ އައިކޮންތަކާއި، ވިގްލް އިފެކްޓްތަކާއި، އަދި ކޮމްޕްލެކްސް މަލްޓި ޓަރން އެނިމޭޝަންތައް ލޯޑްކުރުމުގައި ވެސް ހަމަ ކީފްރޭމްތައް މަސައްކަތްކުރާ ކަމެވެ. ދަ ޕަލްސް ޕެރަޑޮކްސް އެވެ ޕަލްސް އެނިމޭޝަންތައް މާ އުނދަގޫ ވާނީ އެކި ޕްރޮޕަޓީތައް “ޕަލްސް” ކުރެވޭތީ އެވެ. އެއްބަޔަކު ސްކޭލް ޕަލްސް ކުރާއިރު، އަނެއް ބަޔަކު އޮޕަސިޓީ ޕަލްސް ކުރާއިރު، ބައެއް ޕަލްސް ކުލަ ޕްރޮޕަޓީސް ކަމަށްވާ ބްރައިޓްނެސް ނުވަތަ ސެޗުރޭޝަން ފަދަ ތަކެތި ޕަލްސް ކޮށްލައެވެ. ކޮންމެ ޕްރޮޕަޓީއަކަށް ވަކި ކީފްރޭމްތައް އުފެއްދުމުގެ ބަދަލުގައި، ކޮންމެ ސީއެސްއެސް ޕްރޮޕަޓީއަކާ ވެސް މަސައްކަތްކުރާ ކީފްރޭމްތައް އުފެއްދިދާނެއެވެ. މިއީ ސްކޭލް އަދި އޮޕަސިޓީ އޮޕްޝަންތަކާއެކު ޕަލްސް ކީފްރޭމްގެ މިސާލެކެވެ.
/* * ޕަލްސް - ޕަލްސިންގ އެނިމޭޝަން * ސްކޭލް ރޭންޖް ކޮންޓްރޯލް ކުރުމަށް --kf-pulse-scale-from އަދި --kf-pulse-scale-to ބޭނުން ކުރާށެވެ * އޮޕަސިޓީ ރޭންޖް ކޮންޓްރޯލް ކުރުމަށް --kf-pulse-opacity-from އަދި --kf-pulse-opacity-to ބޭނުން ކުރާށެވެ * ޑިފޯލްޓް: ޕަލްސް ނެތް (ހުރިހާ އަގުތަކެއް 1) * ބޭނުންކުރުން: * އެނިމޭޝަން: kf-pulse 2s އީޒް-އިން-އައުޓް އިންފިނިޓް އެލްޓަނޭޓް؛ * --kf-ޕަލްސް-ސްކޭލް-ފްރޮމް: 0.95؛ --kf-ޕަލްސް-ސްކޭލް-ޓު: 1.05؛ // ސްކޭލް ޕަލްސް * --kf-ޕަލްސް-އޮޕަސިޓީ-ފްރޮމް: 0.7؛ --kf-ޕަލްސް-އޮޕަސިޓީ-ޓު: 1؛ // އޮޕަސިޓީ ޕަލްސް */
@ކީފްރޭމްސް ކޭއެފް-ޕަލްސް { އިން { ސްކޭލް: var(--kf-ޕަލްސް-ސްކޭލް-ފްރޮމް، 1); އޮޕަސިޓީ: var(--kf-ޕަލްސް-އޮޕަސިޓީ-ފްރޮމް، 1); } އަށް { ސްކޭލް: var(--kf-ޕަލްސް-ސްކޭލް-ޓު، 1); އޮޕަސިޓީ: var(--kf-ޕަލްސް-އޮޕަސިޓީ-ޓު، 1); } }
މިކަމުގެ ސަބަބުން ގިނަ ޕްރޮޕަޓީތަކެއް އެނިމޭޓް ކުރެވޭ ފްލެކްސިބަލް ޕަލްސްއެއް އުފެދެއެވެ: .ކޯލް-ޓު-އެކްޝަން { އެނިމޭޝަން: kf-pulse 0.6s އިންފިނިޓް އެލްޓަނޭޓް؛ --kf-ޕަލްސް-އޮޕަސިޓީ-ފްރޮމް: 0.5؛ /* އޮޕަސިޓީ ޕަލްސް */ }
.ނޮޓިފިކޭޝަން-ޑޮޓް { އެނިމޭޝަން: kf-pulse 0.6s އީޒް-އިން-އައުޓް އިންފިނިޓް އެލްޓަނޭޓް؛ --kf-ޕަލްސް-ސްކޭލް-ފްރޮމް: 0.9؛ --kf-pulse-scale-to: 1.1؛ /* ސްކޭލް ޕަލްސް */ }
.ޓެކްސްޓް-ހައިލައިޓް { އެނިމޭޝަން: kf-pulse 1.5s ފަސޭހަ-އައުޓް އިންފިނިޓް؛ --kf-ޕަލްސް-ސްކޭލް-ފްރޮމް: 0.8؛ --kf-ޕަލްސް-އޮޕަސިޓީ-ފްރޮމް: 0.2؛ /* ސްކޭލް އަދި އޮޕަސިޓީ ޕަލްސް */ }
ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 6 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. މި ސިންގަލް ކޭއެފް-ޕަލްސް ކީފްރޭމް އިން ނާޒުކު ސަމާލުކަން ހޯދުމުން ފެށިގެން ޑްރާމާ ހައިލައިޓްތަކާ ހަމައަށް ހުރިހާ ކަމެއް ވެސް ހެންޑްލް ކުރެވޭއިރު، މި ހުރިހާ ކަމެއް ވެސް ކަސްޓަމައިޒް ކުރަން ފަސޭހަ އެވެ. އެޑްވާންސްޑް އީސިންގ އެވެ ކީފްރޭމްސް ޓޯކަން ބޭނުންކުރުމުގެ މޮޅު އެއް ކަމަކީ އަޅުގަނޑުމެންގެ އެނިމޭޝަން ލައިބްރަރީ ފުޅާކޮށް، އިލާސްޓިކް ނުވަތަ ބައުންސް ފަދަ ގިނަ ޑިވެލޮޕަރުން ސުމެއްގައި ލިޔަން އުނދަގޫ ނުކުރާނެ އިފެކްޓްސް ފޯރުކޮށްދިނުމަކީ ކިހާ ފަސޭހަ ކަމެކެވެ. މިއީ ޖަމްޕް އުސްމިން ކޮންޓްރޯލް ކުރުމަށް --kf-bounce-from ކަސްޓަމް ޕްރޮޕަޓީ ބޭނުންކުރާ ސާދާ “ބައުންސް” ކީފްރޭމްސް ޓޯކަން އެއްގެ މިސާލެކެވެ. /* * ބައުންސް - ބައުންސިންގ އެންޓްރެންސް އެނިމޭޝަން * ޖަމްޕް ހެއިޓް ކޮންޓްރޯލް ކުރުމަށް --kf-bounce-from ބޭނުން ކުރާށެވެ * ޑިފޯލްޓް: 100vh އިން ފުންމާލަނީ (އޮފް ސްކްރީން) * ބޭނުންކުރުން: * އެނިމޭޝަން: kf-bounce 3s އީޒް-އިން؛ * --kf-bounce-from: 200px؛ // 200px އުސްމިނުން ފުންމާލުން */
@ކީފްރޭމްސް kf-bounce { 0% { ތަރުޖަމާކުރުން: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { ތަރުޖަމާކުރުން: 0 calc(var(--kf-bounce-from, 100vh) * -0.4); }
55% { ތަރުޖަމާކުރުން: 0 calc(var(--kf-bounce-from, 100vh) * -0.2); }
72% { ތަރުޖަމާކުރުން: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { ތަރުޖަމާކުރުން: 0 calc(var(--kf-bounce-from, 100vh) * -0.05); }
94% { ތަރުޖަމާކުރުން: 0 calc(var(--kf-bounce-from, 100vh) * -0.025); }
99% { ތަރުޖަމާކުރުން: 0 calc(var(--kf-bounce-from, 100vh) * -0.0125); }
%22، %45، %64، %79، %90، %97، %100 { ތަރުޖަމާކުރުން: 0 0؛ އެނިމޭޝަން-ޓައިމިންގ-ފަންކްޝަން: ފަސޭހަ-އައުޓް؛ } }
“އިލާސްޓިކް” ފަދަ އެނިމޭޝަންތައް ތަންކޮޅެއް އުނދަގޫ ވާނީ ކީފްރޭމްތަކުގެ ތެރޭގައި ހުންނަ ހިސާބުތަކުގެ ސަބަބުންނެވެ. އަޅުގަނޑުމެންނަށް ބޭނުންވަނީ --kf-elastic-from-X އަދި --kf-elastic-from-Y ވަކިވަކިން ކަނޑައަޅަން (އެދެކަންތައްވެސް އިޚްތިޔާރީ)، އަދި އެދެމީހުން އެކުގައި ސްކްރީންގެ ކޮންމެ ހިސާބަކުންވެސް އިލާސްޓިކް އެންޓްރެންސެއް އުފެއްދުމަށް ދޫކޮށްލަމެވެ.
/* * އިލާސްޓިކް އިން - އިލާސްޓިކް އެންޓްރެންސް އެނިމޭޝަން * ސްޓާޓް ޕޮޒިޝަން ކޮންޓްރޯލް ކުރުމަށް --kf-elastic-from-X އަދި --kf-elastic-from-Y ބޭނުންކުރުން * ޑިފޯލްޓް: މަތީ މެދުތެރެއިން ވަންނަނީ (0، -100vh) * ބޭނުންކުރުން: * އެނިމޭޝަން: kf-elastic-in 2s ފަސޭހަ-އިން-އައުޓް ދެމީހުން ވެސް؛ * --kf-އެލާސްޓިކް-ފްރޮމް-އެކްސް: -50px؛ * --kf-އިލަސްޓިކް-ފްރޮމް-ވައި: -200px؛ // (-50px, -200px) އިން އެންޓަރ ކުރާށެވެ. */
@ކީފްރޭމްސް kf-elastic-in { 0% { ތަރުޖަމާކުރުން: ކެލްކް (var(--kf-އިލާސްޓިކް-ފްރޮމް-އެކްސް، -50vw) * 1) calc(var(--kf-އިލާސްޓިކް-ފްރޮމް-ވައި، 0px) * 1); }
16% { ތަރުޖަމާކުރުން: ކެލްކް(ވަރ(--ކޭއެފް-އިލާސްޓިކް-ފްރޮމް-އެކްސް، -50ވީޑަބްލިއު) * -0.3227) ކެލްކް(ވަރ(--ކޭއެފް-އިލާސްޓިކް-ފްރޮމް-ވައި، 0ޕީއެކްސް) * -0.3227); }
28% { ތަރުޖަމާކުރުން: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-އިލާސްޓިކް-ފްރޮމް-ވައި، 0px) * 0.1312); }
44% { ތަރުޖަމާކުރުން: ކެލްކް(ވަރ(--ކޭއެފް-އިލާސްޓިކް-ފްރޮމް-އެކްސް، -50ވީޑަބްލިއު) * -0.0463) ކެލްކް(ވަރ(--ކޭއެފް-އިލާސްޓިކް-ފްރޮމް-ވައި، 0ޕީއެކްސް) * -0.0463); }
59% { ތަރުޖަމާކުރުން: ކެލްކް(ވަރ(--ކޭއެފް-އިލާސްޓިކް-ފްރޮމް-އެކްސް، -50ވީޑަބްލިއު) * 0.0164) ކެލްކް(ވަރ(--ކޭއެފް-އިލާސްޓިކް-ފްރޮމް-ވައި، 0ޕީއެކްސް) * 0.0164); }
73% { ތަރުޖަމާކުރުން: ކެލްކް(ވަރ(--ކޭއެފް-އިލާސްޓިކް-ފްރޮމް-އެކްސް، -50ވީޑަބްލިއު) * -0.0058) ކެލްކް(ވަރ(--ކޭއެފް-އިލާސްޓިކް-ފްރޮމް-ވައި، 0ޕީއެކްސް) * -0.0058); }
88% { ތަރުޖަމާކުރުން: ކެލްކް(ވަރ(--ކޭއެފް-އިލާސްޓިކް-ފްރޮމް-އެކްސް، -50ވީޑަބްލިއު) * 0.0020) ކެލްކް(ވަރ(--ކޭއެފް-އިލާސްޓިކް-ފްރޮމް-ވައި، 0ޕީއެކްސް) * 0.0020); }
100% { ތަރުޖަމާކުރުން: 0 0؛ } }
މިގޮތަށް ކަންތައް ކުރުމުން، ހަމައެކަނި އެއް ކަސްޓަމް ޕްރޮޕަޓީއެއް ބަދަލުކޮށްގެން، އަޅުގަނޑުމެންގެ ޕްރޮޖެކްޓް ތެރޭގައި އެޑްވާންސް ކީފްރޭމްތައް އަލުން ބޭނުންކޮށް ކަސްޓަމައިޒް ކުރުމަށް ފަސޭހަވެގެންދެއެވެ.
.ބައުންސް-އެންޑް-ޒޫމް { އެނިމޭޝަން: kf-bounce 3s އީޒް-އިން، kf-zoom 3s ލައިނަރ؛ --kf-zoom-from: 0؛ }
.ބައުންސް-އެންޑް-ސްލައިޑް { އެނިމޭޝަން-ކޮމްޕޮޒިޝަން: އިތުރުކުރުން؛ /* ދެ އެނިމޭޝަން ވެސް ބޭނުންކުރަނީ ޓްރާންސްލެޓް */ އެނިމޭޝަން: kf-bounce 3s އީޒް-އިން، kf-slide-in 3s ފަސޭހަ-އައުޓް؛ --kf-slide-from: -200px؛ }
.އިލާސްޓިކް-އިން { އެނިމޭޝަން: kf-elastic-in 2s ފަސޭހަ-އިން-އައުޓް ދެމީހުން ވެސް؛ }
ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 7 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. މިހާތަނަށް އައިއިރު އަޅުގަނޑުމެންނަށް ފެނިފައިވަނީ ކީފްރޭމްތައް ސްމާޓް އަދި އެފިޝަންޓް ގޮތެއްގައި ކޮންސޮލިޑޭޓް ކުރެވޭނެ ގޮތްތަކެވެ. ހަމަގައިމުވެސް، ޕްރޮޖެކްޓްގެ ބޭނުންތަކަށް ރަނގަޅަށް ފިޓްވާ ގޮތަށް ކަންކަން ޓްވީކް ކުރަން ބޭނުންވެދާނެ ނަމަވެސް، އާންމު ބައެއް އެނިމޭޝަންތަކާއި ކޮންމެ ދުވަހަކު ބޭނުންކުރާ ކޭސްތަކުގެ މިސާލުތައް އަޅުގަނޑުމެން މިވަނީ ކަވަރުކޮށްފައެވެ. އަދި މި ކީފްރޭމްސް ޓޯކަންތައް ބެހެއްޓިފައި ހުރުމާއެކު، މުޅި ޕްރޮޖެކްޓްގައި އެއްގޮތަކަށް، ބެލެހެއްޓޭނެ އެނިމޭޝަންތައް އުފެއްދުމަށްޓަކައި މިހާރު އަޅުގަނޑުމެންނަށް ވަރުގަދަ ބިލްޑިންގ ބްލޮކްތަކެއް އެބަހުއްޓެވެ. އިތުރަށް ޑަޕްލިކޭޓް ކީފްރޭމްތަކެއް، އިތުރަށް ގްލޯބަލް ސްކޯޕް ކޮންފްލިކްޓްތަކެއް ނެތެވެ. ހަމައެކަނި އަޅުގަނޑުމެންގެ ހުރިހާ އެނިމޭޝަން ބޭނުންތަކެއް ޙައްލުކުރުމަށް ސާފު، ފަސޭހަ ގޮތެކެވެ. އެކަމަކު އަސްލު ސުވާލަކީ: މި ބިލްޑިންގ ބްލޮކްތައް އެކުގައި އެކުލަވާލާނީ ކިހިނެއް ހެއްޔެވެ؟ ޕުޓިންގ އިޓް އޮލް ޓުގޭދަރ އަޅުގަނޑުމެންނަށް ފެނިފައިވަނީ އަސާސީ ކީފްރޭމް ޓޯކަންތައް އެއްކޮށްލުމަކީ ފަސޭހަ ކަމެކެވެ. ފުރަތަމަ އެނިމޭޝަން ޑެފިނިޝްކޮށް، ދެވަނަ އެނިމޭޝަން ޑެފިނިޝްކޮށް، ބޭނުންވާ ގޮތަށް ވެރިއޭބަލްސް ސެޓްކުރުން ނޫން އެހެން ކަމެއް އަޅުގަނޑުމެންނަށް ބޭނުމެއް ނުވެއެވެ. /* ފޭޑް އިން + ސްލައިޑް އިން */ .ޓޯސްޓް { . އެނިމޭޝަން: ކޭއެފް-ފޭޑް-އިން 0.4s، kf-slide-in 0.4s ކިއުބިކް-ބެޒިއަރ(0.34، 1.56، 0.64، 1)؛ --kf-slide-from: 0 40px؛ }
/* ޒޫމް އިން + ފޭޑް އިން */ .މޯޑަލް { . އެނިމޭޝަން: ކޭއެފް-ފޭޑް-އިން 0.3s، kf-zoom 0.3s ކިއުބިކް-ބެޒިއަރ(0.34، 1.56، 0.64، 1)؛ --kf-zoom-from: 0.7؛ --kf-zoom-to: 1؛ }
/* ސްލައިޑް އިން + ޕަލްސް */ .ނޮޓިފިކޭޝަން { އެނިމޭޝަން: ކޭއެފް-ސްލައިޑް-އިން 0.5s، kf-pulse 1.2s އީޒް-އިން-އައުޓް އިންފިނިޓް އެލްޓަނޭޓް؛ --kf-slide-from: -100px 0؛ --kf-ޕަލްސް-ސްކޭލް-ފްރޮމް: 0.95؛ --kf-ޕަލްސް-ސްކޭލް-ޓު: 1.05؛ }
މި ކޮމްބިނޭޝަންތައް ރީތިކޮށް މަސައްކަތް ކުރަނީ ކޮންމެ އެނިމޭޝަނަކުން ވެސް ތަފާތު ޕްރޮޕަޓީއަކަށް އަމާޒުވާތީ: އޮޕަސިޓީ، ޓްރާންސްފޯމް (ތަރުޖަމާ/ސްކޭލް) ފަދަ ކަންކަމެވެ. ދެ އެނިމޭޝަނެއް އެއް ޕްރޮޕަޓީއެއް އެނިމޭޓް ކުރަން މަސައްކަތް ކުރާއިރު — މިސާލަކަށް ދެ އެނިމޭޓް ސްކޭލް ނުވަތަ ދެ އެނިމޭޓް އޮޕަސިޓީ ވެސް — ނަތީޖާއެއް ނުލިބޭނީ ތިބާ ހީކުރާ ގޮތަކަށެވެ. ބައި ޑިފޯލްޓްކޮށް، އެ ޕްރޮޕަޓީއަށް ހަގީގަތުގައި އެޕްލައި ކުރެވޭނީ އެންމެ އެނިމޭޝަން އެއް ކަމަށާއި، މިއީ އެނިމޭޝަން ލިސްޓުގައި އެންމެ ފަހުގެ އެނިމޭޝަން ކަމަށް ވެސް ވިދާޅުވި އެވެ. މިއީ އެއް ޕްރޮޕަޓީއެއްގައި ސީއެސްއެސް އިން އެތައް އެނިމޭޝަންތަކެއް ޙަވާލުކުރާ ގޮތުގެ ލިމިޓެޝަނެކެވެ. މިސާލަކަށް މިކަން ގަސްތުކުރި ގޮތަށް ނުހިނގާނެ ސަބަބަކީ ހަމައެކަނި kf-pulse އެނިމޭޝަން އެޕްލައި ކުރާނެތީއެވެ. .ނުބައި-ކޮމްބޯ { އެނިމޭޝަން: kf-zoom 0.5s ކުރިއަށް، kf-pulse 1.2s އިންފިނިޓް އެލްޓަނޭޓް؛ --kf-zoom-from: 0.5؛ --kf-zoom-to: 1.2؛ --kf-ޕަލްސް-ސްކޭލް-ފްރޮމް: 0.8؛ --kf-pulse-scale-to: 1.1؛ }
އެނިމޭޝަން އެޑިޝަން އެއް ޕްރޮޕަޓީއަކަށް އަސަރުކުރާ އެތައް އެނިމޭޝަންތަކެއް ޙައްލުކުރުމަށް އެންމެ ފަސޭހަ އަދި އެންމެ ސީދާ ގޮތަކީ އެނިމޭޝަން-ކޮމްޕޮޒިޝަން ޕްރޮޕަޓީ ބޭނުންކުރުމެވެ. މަތީގައިވާ އެންމެ ފަހު މިސާލުގައި kf-pulse އެނިމޭޝަން kf-zoom އެނިމޭޝަންގެ ބަދަލުގައި ބޭނުންކުރާތީ، އަޅުގަނޑުމެންނަށް ފުރަތަމަ ޒޫމް ނުފެންނާނެ ކަމަށާއި، އުންމީދުކުރާ ސްކޭލް 1.2 އަށް ނުލިބޭނެ ކަމަށެވެ. އެނިމޭޝަން-ކޮމްޕޮޒިޝަން އިތުރުކުރަން ސެޓްކޮށްގެން، އަޅުގަނޑުމެން ބްރައުޒާއަށް ބުނަނީ ދެ އެނިމޭޝަން އެއްކޮށްލުމަށެވެ. މިކަމުން އަޅުގަނޑުމެން ބޭނުންވާ ނަތީޖާ ލިބެއެވެ. .ކޮމްޕޮނެންޓް-ޓޫ { އެނިމޭޝަން-ކޮމްޕޮޒިޝަން: އިތުރުކުރުން؛ }
ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 8 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. މި އުސޫލު ރަނގަޅަށް މަސައްކަތް ކުރަނީ އަޅުގަނޑުމެން އެއް މުދަލަކަށް ކުރާ އަސަރުތައް އެއްކޮށްލަން ބޭނުންވާ ގިނަ ހާލަތްތަކުގައެވެ. އަދި ސްޓޭޓިކް ޕްރޮޕަޓީ ވެލިއުތަކާއެކު އެނިމޭޝަންތައް އެއްކޮށްލަން ބޭނުންވާ ވަގުތުތަކުގައި ވެސް އެއީ ބޭނުންތެރި އެއްޗެކެވެ. މިސާލަކަށް އަޅުގަނޑުމެން ބޭނުންވާ ތަނުގައި ޓްރާންސްލެޓް ޕްރޮޕަޓީ ބޭނުންކުރާ އެލިމެންޓެއް ހުރެ، ދެން kf-slide-in ކީފްރޭމްސް އިން އެނިމޭޓް ކުރަން ބޭނުންނަމަ، އެނިމޭޝަން-ކޮމްޕޮޒިޝަން ނެތި ނުބައި ފެންނަ ޖަމްޕެއް ލިބެއެވެ. ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 9 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. އެނިމޭޝަން-ކޮމްޕޮޒިޝަން އިތުރު ކުރަން ސެޓް ކުރުމުން، އެނިމޭޝަން މިހާރު ހުރި އެއްޗަކާ އޮމާންކަމާއެކު ގުޅިފައިވެ އެވެޓްރާންސްފޯމް ވުމުން، އެ އުފެއްދުން ތަނުގައި ހުރެ، ހީކުރި ގޮތަށް އެނިމޭޓް ވެއެވެ. އެނިމޭޝަން ސްޓޭގަރ އެވެ އެތައް އެނިމޭޝަންތަކެއް ބެލެހެއްޓުމުގެ އަނެއް ގޮތަކީ އެ އެނިމޭޝަންތައް “ސްޓެގަރ” ކުރުމެވެ — އެއީ ފުރަތަމަ އެނިމޭޝަން ނިމުމުން ކުޑަކޮށް ދެވަނަ އެނިމޭޝަން ފެށުން. އެއީ ކޮންމެ ހާލަތަކަށް ވެސް މަސައްކަތްކުރާ ހައްލެއް ނޫން ނަމަވެސް، އަޅުގަނޑުމެންނަށް އެންޓްރެންސް އެނިމޭޝަނެއް ހުރުމުން އޭގެ ފަހުން ކޮންޓިނިއު އެނިމޭޝަން އެއް އޮންނަ އިރު އެއީ ބޭނުންތެރި އެއްޗެކެވެ. /* ފޭޑް އިން + އޮޕަސިޓީ ޕަލްސް */ .ނޮޓިފިކޭޝަން { އެނިމޭޝަން: kf-fade-in 2s ފަސޭހަ އައުޓް، kf-pulse 0.5s 2s ފަސޭހަ-އިން-އައުޓް އިންފިނިޓް އެލްޓަނޭޓް؛ --kf-ޕަލްސް-އޮޕަސިޓީ-ޓު: 0.5؛ }
ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 10 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. އޯޑަރ މެޓަރސް އަޅުގަނޑުމެން މަސައްކަތްކުރާ އެނިމޭޝަންތަކުގެ ބޮޑު ބައެއް ބޭނުންކުރަނީ ޓްރާންސްފޯމް ޕްރޮޕަޓީ އެވެ. ގިނަ ހާލަތްތަކުގައި މިއީ ހަމައެކަނި މާ ފަސޭހަ ކަމެކެވެ. އަދި ޓްރާންސްފޯމް އެނިމޭޝަންތައް ޖީޕީޔޫ އެކްސެލެރޭޓް ކުރެވޭތީ ޕާފޯމަންސް އެޑްވާންޓޭޖެއް ވެސް ލިބެ އެވެ. އެކަމަކު އަޅުގަނޑުމެން ޓްރާންސްފޯމްސް ބޭނުންކުރާނަމަ، އަޅުގަނޑުމެންގެ ޓްރާންސްފޯމަޝަންތައް ކުރިއަށް ގެންދާ ތަރުތީބު މުހިންމުކަން ގަބޫލުކުރަން ޖެހެއެވެ. ބައިވަރު. މިހާތަނަށް އަޅުގަނޑުމެންގެ ކީފްރޭމްތަކުގައި އަޅުގަނޑުމެން ބޭނުންކޮށްފައިވަނީ ވަކިވަކި ޓްރާންސްފޯމްތަކެވެ. ސްޕެކްސް އަށް ބަލާއިރު މިކަންކަން އަބަދުވެސް ތަންފީޒު ކުރެވެނީ ވަކި ތަރުތީބެއްގެ މަތިން: ފުރަތަމަ އެލިމެންޓަށް ލިބެނީ ޓްރާންސްލެޓް، ދެން ރޮޓޭޓް، ދެން ސްކޭލް އެވެ. މިއީ ބުއްދިވެރި އަދި އަޅުގަނޑުމެންގެ ތެރެއިން ގިނަ ބަޔަކު އުންމީދުކުރާ ކަމެކެވެ. އެހެންނަމަވެސް ޓްރާންސްފޯމް ޕްރޮޕަޓީ ބޭނުންކުރާނަމަ ފަންކްޝަންތައް ލިޔެފައިވާ ތަރުތީބަކީ އެ ފަންކްޝަންތައް އެޕްލައިކުރާ ތަރުތީބެވެ. މި ހާލަތުގައި އެކްސް އެކްސިސްގައި 100 ޕިކްސެލް އަށް އެއްޗެއް ގެންގޮސް، ދެން 45 ޑިގްރީ އެނބުރުވައިފިނަމަ، ފުރަތަމަ 45 ޑިގްރީ އެނބުރުވައި، ދެން 100 ޕިކްސެލް އެނބުރުވުމާ އެއްގޮތެއް ނޫނެވެ. /* ޕިންކް ސްކުއަރ: ފުރަތަމަ ތަރުޖަމާކުރުން، ދެން އެނބުރުވުން */ .މިސާލު-އެއް { ޓްރާންސްފޯމް: ޓްރާންސްލެޓްއެކްސް(100px) ރޮޓޭޓް(45deg); }
/* ފެހި ސްކުއަރ: ފުރަތަމަ އެނބުރޭ، ދެން ތަރުޖަމާކުރުން */ .މިސާލު-ދެ { ޓްރާންސްފޯމް: ރޮޓޭޓް(45deg) ޓްރާންސްލެޓްއެކްސް(100px); }
ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 11 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. އެކަމަކު ޓްރާންސްފޯމް އޯޑަރަށް ބަލާއިރު، ހުރިހާ އިންޑިވިޖުއަލް ޓްރާންސްފޯމްތަކެއް — އަޅުގަނޑުމެން ކީފްރޭމްސް ޓޯކަންތަކަށް ބޭނުންކޮށްފައިވާ ހުރިހާ އެއްޗެއް — ޓްރާންސްފޯމް ފަންކްޝަންތަކުގެ ކުރިން ހިނގައެވެ. މާނައަކީ ޓްރާންސްފޯމް ޕްރޮޕަޓީގައި ސެޓް ކުރާ ކޮންމެ ކަމެއް ވެސް ވާނީ އެނިމޭޝަންތަކަށް ފަހުގައެވެ. އެކަމަކު މިސާލަކަށް، kf-spin ކީފްރޭމްތަކާއެކު ތަރުޖަމާ ސެޓްކޮށްފިނަމަ، ތަރުޖަމާ ވާނީ އެނިމޭޝަންގެ ކުރިންނެވެ. އަދިވެސް އޮޅުން ބޮޅުން ވެއްޖެތަ؟! މިކަމުގެ ސަބަބުން ސްޓޭޓިކް ވެލިއުތަކުގެ ސަބަބުން އެއް އެނިމޭޝަނަކަށް ތަފާތު ނަތީޖާތަކެއް ލިބިދާނެ ހާލަތްތަކެއް ކުރިމަތިވެއެވެ.
/* ދެ ސްޕިނަރުންނަށް ވެސް އާންމު އެނިމޭޝަން */ .ސްޕިނަރ { . އެނިމޭޝަން: kf-spin 1s ލައިނަރ އިންފިނިޓް؛ }
/* ޕިންކް ސްޕިނަރ: ރޮޓޭޓް ކުރުމުގެ ކުރިން ތަރުޖަމާކުރުން (އިންޑިވިޖުއަލް ޓްރާންސްފޯމް) */ .ސްޕިނަރ-ޕިންކް { . ތަރުޖަމާކުރުން: 100% 50%؛ }
/* ފެހި ސްޕިނަރ: އެނބުރުވުމަށްފަހު ތަރުޖަމާކުރުން (ފަންކްޝަން ތަރުތީބު) */ .ސްޕިނަރ-ގްރީން { . ޓްރާންސްފޯމް: ތަރުޖަމާކުރުން(100%، 50%)؛ }
ޕެން ކީފްރޭމްސް ޓޯކަންސް - ޑެމޯ 12 [ފޯކްޑް] އަމިތު ޝީން ބައްލަވާށެވެ. ފެންނަ ފެނުމުގައި ފުރަތަމަ ސްޕިނަރ (ޕިންކް) އަށް ލިބެނީ kf-spin ގެ އެނބުރުމުގެ ކުރިން ދިމާވާ ޓްރާންސްލެޓް ކަމުން ފުރަތަމަ އޭގެ ތަނަށް ބަދަލުވެ، ދެން އެނބުރެއެވެ. ދެވަނަ ސްޕިނަރ (ފެހި) އަށް ލިބެނީ އިންޑިވިޖުއަލް ޓްރާންސްފޯމް އަށް ފަހު ދިމާވާ ޓްރާންސްލެޓް() ފަންކްޝަނެއް ކަމުން އެ އެލިމެންޓް ފުރަތަމަ ސްޕިން ކޮށް، ދެން އޭގެ ކަރަންޓް އެންގްލަށް ނިސްބަތްކޮށް ހަރަކާތްތެރިވެ، އަހަރެމެންނަށް އެ ވައިޑް އޯބިޓް އިފެކްޓް ލިބެއެވެ. ނޫން މިއީ ބަގެއް ނޫނެވެ. އެއީ ހަމައެކަނި ސީއެސްއެސްއާ ބެހޭގޮތުން އަޅުގަނޑުމެންނަށް އެނގެން ޖެހޭ އަދި އެތައް އެނިމޭޝަންތަކެއް ނުވަތަ ގިނަ ޓްރާންސްފޯމްތަކަކާ އެކު މަސައްކަތް ކުރާއިރު ވިސްނަންޖެހޭ އެއް ކަމެކެވެ. ބޭނުންނަމަ، rotate() ފަންކްޝަން ބޭނުންކޮށްގެން އެލިމެންޓްތައް އެނބުރޭ kf-spin-alt ކީފްރޭމްތަކުގެ އިތުރު ސެޓެއް ވެސް އުފެއްދިދާނެއެވެ. ރިޑޫސްޑް މޯޝަން އަދި އަލްޓަނޭޓިވް ކީފްރޭމްތަކުގެ ވާހަކަ ދައްކާއިރު، “ނޯ އެނިމޭޝަން” އޮޕްޝަނަށް އަޅާނުލެވޭނެއެވެ. ކީފްރޭމްސް ޓޯކަން ބޭނުންކުރުމުގެ އެންމެ ބޮޑު އެއް ފައިދާއަކީ އެކްސެސިބިލިޓީ ބެކް އިން ކުރެވޭނެ ކަމާއި، ހަގީގަތުގައި އެއީ ކުރަން ފުދޭވަރަކަށް ފަސޭހަ ކަމެކެވެ. އެކްސެސިބިލިޓީއަށް ވިސްނައިގެން އަޅުގަނޑުމެންގެ ކީފްރޭމްތައް ޑިޒައިންކޮށްގެން، ރިޑޫސްޑް މޮޝަން އިސްކަންދޭ ޔޫޒަރުންނަށް އިތުރު މަސައްކަތެއް ނުވަތަ ކޯޑް ޑަޕްލިކޭޝަން ނެތި، އޮމާން، ޑިސްޓްރެކްޓިން މަދު ތަޖުރިބާއެއް ލިބޭނެކަން ކަށަވަރު ކުރެވޭނެއެވެ. “ރިޑޫސްޑް މޯޝަން” ގެ ސީދާ މާނަ އެއް އެނިމޭޝަނުން އަނެއް އެނިމޭޝަނަށް، އަދި ޕްރޮޖެކްޓަކުން އަނެއް ޕްރޮޖެކްޓަކަށް ތަންކޮޅެއް ބަދަލުވެދާނެ ނަމަވެސް މިއީ ވިސްނަންޖެހޭ މުހިންމު މަދު ނުކުތާތަކެކެވެ. ކީފްރޭމްސް މުއުޓިންގ ބައެއް އެނިމޭޝަންތައް މަޑުކޮށް ނުވަތަ ލަސްކޮށްލެވޭއިރު، ރިޑޫސްޑް މޮޝަން އެދުމުން މުޅިން ނެތިގެން ދާން ޖެހޭ އަނެއްބައި އެނިމޭޝަންތައް ވެސް ހުރެ އެވެ. ޕަލްސް އެނިމޭޝަންތަކަކީ އޭގެ ރަނގަޅު މިސާލެކެވެ. މި އެނިމޭޝަންތައް ރިޑޫސްޑް މޯޝަން މޯޑުގައި ނުހިނގާކަން ޔަގީން ކުރުމަށްޓަކައި، އަޅުގަނޑުމެންނަށް ފަސޭހައިން އެކަށީގެންވާ މީޑިއާ ކިއުއަރީއެއްގައި ވަށާލެވިދާނެއެވެ.
@media (ޕްރިފަރސް-ރިޑޫސްޑް-މޯޝަން: ނޯ-ޕްރިފަރެންސް) { @keyfrmaes kf-ޕަލްސް { އިން { ސްކޭލް: var(--kf-ޕަލްސް-ސްކޭލް-ފްރޮމް، 1); އޮޕަސިޓީ: var(--kf-ޕަލްސް-އޮޕަސިޓީ-ފްރޮމް، 1); } އަށް { ސްކޭލް: var(--kf-ޕަލްސް-ސްކޭލް-ޓު، 1); އޮޕަސިޓީ:var(--kf-ޕަލްސް-އޮޕަސިޓީ-ޓު، 1); } } }
މިއީ ރިޑޫސް ކުރުމަށް ޕްރިފަރސް-ރިޑޫސްޑް-މޯޝަން ސެޓްކޮށްފައިވާ ޔޫޒަރުންނަށް އެނިމޭޝަން ނުފެންނާނެ ކަމާއި، އެމީހުންގެ ޕްރެފެރެންސްއާ އެއްގޮތް ތަޖުރިބާއެއް ލިބޭނެ ކަމުގެ ޔަގީންކަން ލިބޭ ކަމެކެވެ. އިންސްޓޭންޓް އިން އެންޓްރެންސް އެނިމޭޝަން ފަދަ އަޅުގަނޑުމެންނަށް ފަސޭހައިން ނައްތާލެވޭ ބައެއް ކީފްރޭމްތައް އެބަހުއްޓެވެ. އަގު ބަދަލުވާން ޖެހޭނެ، އެނިމޭޓްވާން ޖެހޭނެ؛ އެހެން ނޫންނަމަ، އެލިމެންޓުގައި ރަނގަޅު އަގުތަކެއް ނުހުންނާނެއެވެ. އެކަމަކު ރިޑޫސްޑް މޮޝަންގައި މި ޓްރާންސިޝަން އިންޓިޝިއަލް ވެލިއު އިން ވަގުތުން ވާންޖެހޭނެއެވެ. މިކަން ހާސިލް ކުރުމަށްޓަކައި، އަޅުގަނޑުމެން ކަނޑައަޅާނީ ކީފްރޭމްގެ އިތުރު ސެޓެއް ކަމުގައިވާއިރު، އެ ސެޓުގައި އަގު ވަގުތުން ނިމުނު ޙާލަތަށް ފުންމާލައެވެ. މިއީ އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ކީފްރޭމްތަކަށް ވެގެންދެއެވެ. ދެން، ކުރިން މިސާލުގައި ދެއްކި ފަދައިން، ޕްރިފަރސް-ރިޑޫސްޑް-މޯޝަން އަށް ނޯ-ޕްރެފެރެންސް އަށް ސެޓްކޮށްފައިވާ މީޑިއާ ކިއުއަރީއެއްގެ ތެރޭގައި ހުންނަ ރެގިއުލާ ކީފްރޭމްތައް އިތުރުކުރާނަމެވެ. /* ރިޑޫސްޑް މޮޝަން އަށް ވަގުތުން ޕޮޕް އިން ކޮށްލައްވާ */ @ކީފްރޭމްސް kf-zoom { އިން، އަށް { ސްކޭލް: var(--kf-ޒޫމް-ޓު، 1); } }
@media (ޕްރިފަރސް-ރިޑޫސްޑް-މޯޝަން: ނޯ-ޕްރިފަރެންސް) { /* އަސްލު ޒޫމް ކީފްރޭމްސް */ @ކީފްރޭމްސް kf-zoom { އިން { ސްކޭލް: var(--kf-ޒޫމް-ފްރޮމް، 0.8); } އަށް { ސްކޭލް: var(--kf-ޒޫމް-ޓު، 1); } } }
މިގޮތަށް ރިޑޫސްޑް މޮޝަން އިސްކަންދޭ ޔޫޒަރުންނަށް އެ އެލިމެންޓް ވަގުތުން އޭގެ ފައިނަލް ސްޓޭޓްގައި ފެންނައިރު، އެހެން އެންމެންނަށް އެނިމޭޓެޑް ޓްރާންސިޝަން ލިބޭނެ އެވެ. ދަ ސޮފްޓް އެޕްރޯޗް އެވެ އަޅުގަނޑުމެން ކޮންމެވެސް ހަރަކާތެއް ބެހެއްޓުމަށް ބޭނުންވާ ނަމަވެސް އަސްލު އެނިމޭޝަނަށް ވުރެ މާ މަޑުމައިތިރި އަދި ހަމަޖެހޭ ހާލަތްތަކެއް ވެސް އެބަހުއްޓެވެ. މިސާލަކަށް ބައުންސް އެންޓްރެންސްގެ ބަދަލުގައި މަޑުމަޑުން ފޭޑް-އިން އެއް ޖަހާލެވިދާނެއެވެ.
@ކީފްރޭމްސް kf-bounce { /* ރިޑޫސްޑް މޮޝަން އަށް ސޮފްޓް ފޭޑް-އިން */ }
@media (ޕްރިފަރސް-ރިޑޫސްޑް-މޯޝަން: ނޯ-ޕްރިފަރެންސް) { @ކީފްރޭމްސް kf-bounce { /* އަސްލު ބައުންސް ކީފްރޭމްސް */ } }
މިހާރު ރިޑޫސްޑް މޯޝަން އެނެބަލް ކޮށްފައިވާ ޔޫޒަރުންނަށް އަދިވެސް ފެންނަ ފެނުމުގެ އިހުސާސް ކުރެވޭ ނަމަވެސް ބައުންސް ނުވަތަ އިލާސްޓިކް އެނިމޭޝަންގެ ވަރުގަދަ ހަރަކާތެއް ނެތި އެވެ. ބިލްޑިންގ ބްލޮކްތައް ގާއިމްކޮށްފައި އޮތުމުން ދެން އުފެދޭ ސުވާލަކީ އެއީ ހަގީގީ ވޯކްފްލޯގެ ބަޔަކަށް ހަދާނެ ގޮތެވެ. ފްލެކްސިބަލް ކީފްރޭމް ލިޔުމަކީ އެއް ކަމެއް ނަމަވެސް ބޮޑު ޕްރޮޖެކްޓެއްގެ ތެރެއިން އިތުބާރު ކުރެވޭ ގޮތަށް ހެދުމަށްޓަކައި އަޅުގަނޑަށް އުނދަގޫ ގޮތުގައި ދަސްކުރަން ޖެހުނު މަދު ސްޓްރެޓެޖީތަކެއް ބޭނުންވެއެވެ. އިމްޕްލިމެންޓޭޝަން ސްޓްރެޓެޖީސް އެންޑް ބެސްޓް ޕްރެކްޓިސްސް އަޅުގަނޑުމެންނަށް ކީފްރޭމްސް ޓޯކަންތަކުގެ ސޮލިޑް ލައިބްރަރީއެއް ލިބިއްޖެ ނަމަ، އަސްލު ގޮންޖެހުމަކީ ކޮންމެ ދުވަހެއްގެ މަސައްކަތަށް އެކަންކަން ގެނެވޭނެ ގޮތެވެ.
ވަސްވާހަކީ ހުރިހާ ކީފްރޭމްތަކެއް އެއްފަހަރާ ވައްޓާލައިގެން މައްސަލަ ހައްލުވެއްޖެ ކަމަށް އިއުލާން ކުރުމެވެ، އެކަމަކު ޢަމަލީ ގޮތުން އަޅުގަނޑަށް ފެނިފައިވަނީ އެންމެ ރަނގަޅު ނަތީޖާ ލިބެނީ މަޑުމަޑުން އެޑޮޕްޓް ކުރުމުންނެވެ. ފޭޑް ނުވަތަ ސްލައިޑް ފަދަ އެންމެ އާންމު އެނިމޭޝަންތަކުން ފަށާށެވެ. މިއީ ބޮޑެތި ރީރައިޓްތަކެއް ކުރަން ނުޖެހި ވަގުތުން އަގު ދައްކާ ފަސޭހަ މޮޅުތަކެކެވެ. ނަންކިޔުމަކީ ސަމާލުކަން ދޭންޖެހޭ އަނެއް ނުކުތާއެވެ. އެއްގޮތް ޕްރިފިކްސް ނުވަތަ ނަންސްޕޭސްއަކުން ކޮން އެނިމޭޝަންތަކަކީ ޓޯކަންތަކެއްކަން އަދި ކޮން އެނިމޭޝަންތަކަކީ ލޯކަލް ވަން އޮފްތަކެއްކަން ސާފުވެގެންދެއެވެ. އަދި އެކްސިޑެންޓްތަކުގައި ޖެހުމުން ރައްކާތެރިވެ، އާ ޓީމް މެމްބަރުންނަށް ޝެއަރޑް ސިސްޓަމް އެއް ނަޒަރަކުން ދެނެގަތުމަށް އެހީތެރިވެދެއެވެ. ޑޮކިއުމަންޓޭޝަން އަކީ ޚުދު ކޯޑާ އެއްވަރަށް މުހިންމު އެއްޗެކެވެ. ކޮންމެ ކީފްރޭމްސް ޓޯކަންއެއްގެ މަތީގައި ކުރު ކޮމެންޓެއް ވެސް ފަހުން ގަޑިތަކެއް ވަންދެން ލަފާކުރުމުން ސަލާމަތް ކުރެވޭނެ އެވެ. ޑިވެލޮޕަރަކަށް ޓޯކަންސް ފައިލް ހުޅުވައި، ބޭނުންވާ އިފެކްޓް ސްކޭންކޮށް، ޔޫސޭޖް ޕެޓަރން ސީދާ އެމީހުންގެ ކޮމްޕޮނެންޓަށް ކޮޕީ ކުރެވޭނެ ގޮތް ހެދުން މުހިންމެވެ. މިގޮތަށް ކަންތައް ކުރުމުގެ އަގު ވަޒަން ކުރެވޭ ސަބަބަކީ ފްލެކްސިބިލިޓީ އެވެ. ސެންސިބަލް ކަސްޓަމް ޕްރޮޕަޓީސް ހާމަކޮށްގެން، އަޅުގަނޑުމެން ޓީމުތަކަށް ސިސްޓަމް ފަޅާނުލައި އެނިމޭޝަން އެޑެޕްޓް ކުރުމަށް ޖާގަ ދެމެވެ. ހަމައެއާއެކު މާ ކޮމްޕްލިކޭޓް ނުވާން މަސައްކަތް ކުރާށެވެ. މުހިންމު ނަބްތައް ފޯރުކޮށްދީ، ބާކީ ތިބި މީހުން ޚިޔާލު ތަފާތުކޮށް ބެހެއްޓުން. އެންމެ ފަހުން އެކްސެސިބިލިޓީ ހަނދާން ކުރާށެވެ. ކޮންމެ އެނިމޭޝަނަކަށް ރިޑޫސްޑް މޯޝަން އަލްޓަނޭޓިވްއެއް ބޭނުން ނުވި ނަމަވެސް ގިނަ އެނިމޭޝަނެއް ބޭނުންވެއެވެ. މި އެޖެސްޓްމަންޓްތަކުގައި އަވަހަށް ފިހެލުމުގެ މާނައަކީ ފަހުން ދުވަހަކުވެސް ރެޓްރޯފިޓް ކުރަން ނުޖެހޭނެ ކަމަށާއި، މިއީ ދުވަހަކުވެސް ފާހަގަ ނުކުރިޔަސް އަޅުގަނޑުމެންގެ ޔޫޒަރުންނަށް ފާހަގަކުރެވޭނެ ފަރުވާތެރިކަމުގެ ފެންވަރެއް ދައްކުވައިދޭ ކަމެކެވެ.
އަޅުގަނޑުގެ ތަޖުރިބާއިން ކީފްރޭމްސް ޓޯކަންސް އަކީ އަޅުގަނޑުމެންގެ ޑިޒައިން ޓޯކަންސް ވޯކްފްލޯގެ ބައެއްގެ ގޮތުގައި ބެލުމަކީ އެ ޓޯކަންތައް ސްޓިކް ކޮށްދޭ ކަމެކެވެ. އެތަންތަނުގައި ހުރުމުން، ސްޕެޝަލް އިފެކްޓްސް ފަދަ އިހުސާސެއް ހުއްޓި، ޑިޒައިން ލޭންގުއޭޖްގެ ބަޔަކަށް ވެގެން ދާއިރު، މިއީ ޕްރޮޑަކްޓް ހަރަކާތްތެރިވާ ގޮތާއި ޖަވާބުދާރީވާ ގޮތުގެ ގުދުރަތީ އިތުރުވުމެކެވެ. ރެޕިންގ އަޕް އެނިމޭޝަންތަކަކީ އިންޓަފޭސްތައް ބިނާކުރުމުގައި އެންމެ އުފާވެރި އެއް ބަޔަކަށް ވެދާނެ ނަމަވެސް ސްޓްރަކްޗަރެއް ނެތި އެއީ މާޔޫސްކަމުގެ އެންމެ ބޮޑު އެއް މަސްދަރަކަށް ވެސް ވެދާނެ އެވެ. ކީފްރޭމްތަކަކީ ޓޯކަންތަކެއްގެ ގޮތުގައި ބަލައިގެން، އާންމުކޮށް ގޯސް އަދި މެނޭޖްކުރަން އުނދަގޫ އެއްޗެއް ނަގައި، ސާފު، ލަފާކުރެވޭ ނިޒާމަކަށް ބަދަލުކޮށްލާށެވެ. ހަގީގީ އަގަކީ ހަމައެކަނި މަދު ލައިންތަކެއްގެ ކޯޑް ސޭވް ކުރުމެއް ނޫނެވެ. އެއީ ފޭޑް، ސްލައިޑް، ޒޫމް ނުވަތަ ސްޕިން ބޭނުންކުރާއިރު، މުޅި ޕްރޮޖެކްޓްގައި އެކަން ކުރާނެ ގޮތް ސީދާ އެނގޭނެ ކަމުގެ އިތުބާރެވެ. އެއީ ނިމުމެއް ނެތް ތަފާތުތަކުގެ ހަލަބޮލިކަން ނެތި ކަސްޓަމް ޕްރޮޕަޓީތަކުން ލިބޭ ފްލެކްސިބިލިޓީގަ އެވެ. އަދި އެއީ ފައުންޑޭޝަންގެ ތެރޭގައި ބިނާކޮށްފައިވާ އެކްސެސިބިލިޓީގައި ނޫން ގޮތަކަށް އިތުރުކޮށްފައިވާ ގޮތެވެފަހު ވިސްނުމެކެވެ. މި ޚިޔާލުތައް އެކި ޓީމުތަކާއި އެކި ކޯޑްބޭސްތަކުގައި މަސައްކަތްކުރާތަން އަޅުގަނޑަށް ފެނިފައިވާއިރު، ޕެޓަރން އަބަދުވެސް ހުންނަނީ އެއްގޮތަކަށެވެ. ޓޯކަންތައް ޖައްސާފައި ހުރުމުން ކީފްރޭމްތަކަކީ އެކި ދިމަދިމާލުގައި ޓްރިކްތަކުގެ ޖަމާއަތަކަށް ވުން ހުއްޓި، ޑިޒައިން ބަހުގެ ބަޔަކަށް ވެގެންދެއެވެ. އެއީ އުފެއްދުން ގަސްތުގައި ކުރި ކަމާއި، އެއްގޮތް ކަމާއި، ދިރިހުރި ކަމުގެ އިހުސާސް ކުރެވޭ ގޮތަށެވެ. މި ލިޔުމުން އެއް ކަމެއް ނަގާނަމަ މިއީ މިއީ: އެނިމޭޝަންތަކަށް ހައްގުވަނީ އަޅުގަނޑުމެން މިހާރުވެސް ކުލަތަކާއި، ޓައިޕޮގްރަފީއާއި، ޖާގައަށް ދޭ ފަރުވާއާއި ސްޓްރަކްޗަރ އެވެ. ކީފްރޭމްސް ޓޯކަންސް އަށް ކުޑަ އިންވެސްޓްމަންޓެއް ކުރުމުން އިންޓަފޭސް ހަރަކާތްތެރިވާ ކޮންމެ ފަހަރަކު ފައިދާ ލިބެ އެވެ.
