CSS కీఫ్రేమ్ యానిమేషన్‌లను ఎలా సృష్టించాలి

CSS డెవలపర్‌లకు కీఫ్రేమ్స్ యానిమేషన్‌ని ఉపయోగించి వారి వెబ్ పేజీలకు ప్రాణం పోసే సామర్థ్యాన్ని ఇస్తుంది.

CSS యానిమేషన్ ఒక HTML మూలకం యొక్క ప్రారంభ స్థితిని దాని వివిధ లక్షణాల ద్వారా మార్చడం ద్వారా సాధించబడుతుంది. యానిమేట్ చేయగల కొన్ని సాధారణ CSS లక్షణాలు:

---

---

wsappx అంటే ఏమిటి (2)

• వెడల్పు
• ఎత్తు
• స్థానం
• రంగు
• అస్పష్టత

కావలసిన ఫలితాన్ని సృష్టించడానికి ఈ సాధారణ CSS లక్షణాలు నిర్దిష్ట CSS మూలకాల ద్వారా తారుమారు చేయబడతాయి. మీరు ఎప్పుడైనా వెబ్ పేజీలో యానిమేటెడ్ ఎలిమెంట్‌ని చూసినట్లయితే, కీఫ్రేమ్స్ యానిమేషన్‌ను ఉపయోగించి మూలకం యానిమేట్ చేయబడిన అవకాశాలు ఉన్నాయి.

కీఫ్రేమ్స్ ఎలిమెంట్ అంటే ఏమిటి?

ది కీఫ్రేమ్స్ మూలకం దీనికి యాక్సెస్ ఉన్న ఒకటి లేదా అంతకంటే ఎక్కువ HTML మూలకాలలో ఉపయోగించవచ్చు. ఇది ఒక మూలకం యొక్క స్థితిలో ఒక నిర్దిష్ట బిందువును గుర్తిస్తుంది మరియు ఈ మూలకం ఈ సమయంలో తప్పనిసరిగా ఉండే రూపాన్ని నిర్దేశిస్తుంది.

ఇది జీర్ణించుకోవడానికి చాలా ఎక్కువ అనిపించవచ్చు, కానీ వాస్తవానికి ఇది చాలా సులభం. ది కీఫ్రేమ్స్ మూలకం ఏవైనా యానిమేషన్ అవసరాలకు సులభంగా అర్థం చేసుకోగల మరియు సర్దుబాటు చేయగల అందమైన సూటిగా ఉండే నిర్మాణాన్ని కలిగి ఉంది.

కీఫ్రేమ్‌ల నిర్మాణం ఉదాహరణ


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

మీరు ఆకుపచ్చ దీర్ఘచతురస్రాకార బటన్‌ను బ్లూ రౌండ్ బటన్‌గా మార్చడం ద్వారా యానిమేట్ చేయాలనుకుంటున్నారని చెప్పండి.

యొక్క పారామితుల లోపల నుండి ఎగువ భాగంలో ఆకుపచ్చ దీర్ఘచతురస్రాకార బటన్ లాగా ఉండే మూలకం ఉండటానికి అవసరమైన అన్ని స్టైలింగ్‌ను మీరు ఉంచాలి, తర్వాత కు విభాగం, మీరు ఈ బటన్‌ను బ్లూ రౌండ్ బటన్‌గా మార్చడానికి అన్ని స్టైలింగ్ అవసరాలను ఉంచుతారు.

---

---

మీరు ఆలోచిస్తుంటే, అది యానిమేషన్ లాగా అనిపించదు. సరే, ఎందుకంటే ఈ మొత్తం ప్రక్రియలో కీలక భాగం ఇంకా పరిచయం చేయబడలేదు --- ఈ భాగం యానిమేషన్ ఆస్తి.

యానిమేషన్ ఆస్తి

ది యానిమేషన్ ఆస్తి విభిన్న ఉప లక్షణాల సమితిని కలిగి ఉంది; కావలసిన HTML మూలకాన్ని యానిమేట్ చేయడానికి పై కీఫ్రేమ్‌ల నిర్మాణంతో కలిపి వీటిని ఉపయోగిస్తారు.

---

---

అయితే, మీ ప్రాజెక్ట్‌లలో యానిమేషన్‌ని సాధించడానికి మీరు ఈ ఐదు ఉప లక్షణాలు మరియు వాటికి సంబంధించిన విలువలను మాత్రమే తెలుసుకోవాలి. ఈ లక్షణాలు అంటారు:

• యానిమేషన్-పేరు
• యానిమేషన్-వ్యవధి
• యానిమేషన్-టైమింగ్-ఫంక్షన్
• యానిమేషన్-ఆలస్యం
• యానిమేషన్-పునరుక్తి-గణన

వెబ్ పేజీలో యానిమేషన్‌ని ఉపయోగించడం

పై దృష్టాంతాన్ని ఉపయోగించి, యానిమేటెడ్ బటన్‌ని సృష్టించడమే లక్ష్యం.

బటన్ యానిమేషన్ ఉదాహరణ







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!




పైన పేర్కొన్న కోడ్ యొక్క యానిమేషన్ విభాగంలో ముందుగా పేర్కొన్న ఐదు ఉప లక్షణాలు ఉన్నాయి. ప్రతి ఆస్తి చాలా విలక్షణమైన పనితీరును కలిగి ఉంటుంది మరియు కలిసి వారు లక్ష్యంగా చేసిన ఏదైనా HTML మూలకాన్ని యానిమేట్ చేయడానికి పని చేస్తాయి.

సంబంధిత: CSS సెలెక్టర్లను ఉపయోగించి వెబ్ పేజీ యొక్క భాగాన్ని ఎలా టార్గెట్ చేయాలి

యానిమేషన్-పేరు ఆస్తి

ఈ ఆస్తి జాబితాలో అత్యంత ముఖ్యమైన ఏకైక ఆస్తి. లేకుండా యానిమేషన్-పేరు ఆస్తి , గతానికి మీకు ఎలాంటి ఐడెంటిఫైయర్ ఉండదు కీఫ్రేమ్స్ మూలకం , దాని పారామీటర్‌లలోని అన్ని కోడ్‌లను నిరుపయోగంగా మారుస్తోంది.

మీరు ఇతర సబ్-ప్రాపర్టీలలో ఒకటి లేదా రెండింటిని చేర్చడం మర్చిపోతే, మీరు ఇప్పటికీ మంచి యానిమేషన్ కలిగి ఉండవచ్చు. అయితే, మీరు దానిని మర్చిపోతే యానిమేషన్-పేరు ఆస్తి మీకు యానిమేషన్ ఉండదు.

యానిమేషన్-వ్యవధి ఆస్తి

యానిమేటెడ్ ఎలిమెంట్ ఒక రాష్ట్రం నుండి మరొక రాష్ట్రానికి మారినప్పుడు తీసుకోవాల్సిన సమయాన్ని నిర్వచించడానికి ఈ ఆస్తి ఉపయోగించబడుతుంది.

పై ఉదాహరణలో, ది యానిమేషన్-వ్యవధి ఆస్తి 5 సెకన్లకు (5 సె) సెట్ చేయబడింది, కాబట్టి ఆకుపచ్చ దీర్ఘచతురస్రాకార బటన్ పూర్తిగా నీలిరంగు రౌండ్ బటన్ కావడానికి ముందు మొత్తం 5 సెకన్లు ఉంటుంది.

యానిమేషన్-ఆలస్యం ఆస్తి

ఈ ఆస్తి ఒక కారణం కారణంగా ముఖ్యమైనది; కొన్ని వెబ్ పేజీలు పూర్తిగా లోడ్ కావడానికి కొన్ని సెకన్లు పట్టవచ్చు (వివిధ కారణాల వల్ల). కాబట్టి యానిమేషన్-ఆలస్యం ఆస్తి వెబ్ పేజీ లోడ్ కావడానికి కొంత సమయం తీసుకుంటే వెంటనే యానిమేషన్ ప్రారంభం కాకుండా నిరోధిస్తుంది.

పై ఉదాహరణలో, ది యానిమేషన్-ఆలస్యం ఆస్తి 4s కు సెట్ చేయబడింది, అంటే వెబ్‌పేజీని సందర్శించిన 4 సెకన్ల వరకు యానిమేషన్ ప్రారంభం కాదు (యానిమేషన్ ప్రారంభమయ్యే ముందు వెబ్ పేజీని లోడ్ చేయడానికి తగినంత సమయం ఇవ్వడం).

యానిమేషన్-పునరుక్తి-కౌంట్ ఆస్తి

యానిమేటెడ్ మూలకం ఒక రాష్ట్రం నుండి మరొక రాష్ట్రానికి ఎన్నిసార్లు మారాలని ఈ ఆస్తి తెలుపుతుంది. ది యానిమేషన్-పునరుక్తి-కౌంట్ ఆస్తి పదాలు మరియు సంఖ్యలుగా ఉండే విలువలను తీసుకుంటుంది. సంఖ్యా విలువ 1 నుండి పైకి ఏదైనా కావచ్చు, అయితే పదం విలువ సాధారణంగా ఉంటుంది అనంతం .

పై ఉదాహరణలో, ది యానిమేషన్-పునరుక్తి-కౌంట్ విలువ కు సెట్ చేయబడింది అనంతం , అంటే వెబ్ పేజీ ఉన్నంత వరకు బటన్ ఆస్తి ఒక రాష్ట్రం నుండి మరొక రాష్ట్రానికి, నిరంతరం యానిమేట్ అవుతుంది.

యానిమేషన్-టైమింగ్-ఫంక్షన్ ఆస్తి

ఈ ఆస్తి యానిమేటెడ్ మూలకం యొక్క కదలికను నిర్దేశిస్తుంది, ఎందుకంటే ఇది ఒక రాష్ట్రం నుండి మరొక రాష్ట్రానికి మారుతుంది. ది యానిమేషన్-టైమింగ్-ఫంక్షన్ ఆస్తి సాధారణంగా మూడు సులభ విలువలలో ఒకటి కేటాయించబడుతుంది.

• సులభతరం
• ఈజ్-అవుట్
• ఈజ్-ఇన్-అవుట్

ది ఈజీ-ఇన్-అవుట్ విలువ పైన ఉపయోగించబడింది; ఇది నెమ్మదిగా యానిమేషన్‌ను ఒక రాష్ట్రం నుండి మరొక రాష్ట్రానికి మారుస్తుంది. బటన్ ఆకుపచ్చ దీర్ఘచతురస్రం నుండి నీలిరంగు వృత్తానికి మారుతున్నప్పుడు నెమ్మదిగా పరివర్తన సృష్టించడమే లక్ష్యం అయితే సులభంగా విలువ . మీరు నెమ్మదిగా పరివర్తనను వ్యతిరేక దిశలో మాత్రమే కోరుకుంటే మీరు దాన్ని ఉపయోగించవచ్చు సులభమైన విలువ .

మా కోడ్‌ని తగ్గించడం

చాలా సందర్భాలలో, ప్రోగ్రామ్ యొక్క నిడివిని తగ్గించడం ఒక ఆచరణాత్మక విధానంగా కనిపిస్తుంది. మీ ప్రోగ్రామ్‌లలో గుర్తించబడని లోపాల సంభావ్యతను తక్కువ కోడ్ లైన్‌లు తగ్గించడం దీనికి ప్రధాన కారణం.

పైన ఉన్న కోడ్‌ను నాలుగు లైన్ల ద్వారా తగ్గించవచ్చు. యానిమేషన్ ప్రాపర్టీని దాని ప్రతి ఉప-లక్షణాలను స్పష్టంగా గుర్తించకుండా ఉపయోగించడం ద్వారా దీనిని సాధించవచ్చు.

బటన్ యానిమేషన్ ఉదాహరణ కోసం కోడ్‌ను తగ్గించడం







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}