CSS పరివర్తనను ఎలా అమలు చేయాలి: యానిమేషన్లు పూర్తయ్యాయి

వెబ్ పేజీలోని యానిమేషన్‌లు ఎక్కువ మంది వినియోగదారులను ఆకర్షించగలవు. మీరే ఇలా ప్రశ్నించుకోండి - మీరు కొంచెం యానిమేషన్ ఉన్న వెబ్ పేజీని చూడాలనుకుంటే, మీరు మరింత అన్వేషించాలనుకుంటున్నారా? ఇప్పుడు, CSS పరివర్తనాలతో మీరు కొన్ని గొప్ప యానిమేషన్లతో మీ పనిని సజీవంగా మార్చవచ్చు. మరియు, మీరు గుర్తుంచుకోండి, ఇవి సరిగ్గా జరగాలి. కింది క్రమంలో CSS పరివర్తనాల ప్రపంచాన్ని అన్వేషిద్దాం:

• CSS పరివర్తనాలు ఎందుకు?
• పరివర్తన ఆస్తి
• మీరు ఏమి పేర్కొనాలి?
• పరివర్తన-సమయ-ఫంక్షన్ ఫంక్షన్ ఆస్తి
• పరివర్తన-ఆలస్యం ఆస్తి

CSS పరివర్తనాలు ఎందుకు?

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

CSS పరివర్తనాలు మార్పులను నిర్వచించటానికి మిమ్మల్ని అనుమతిస్తాయి మూలకాలు, నిర్దిష్ట సమయ వ్యవధి, త్వరణం వక్రత యొక్క వేగం మరియు మరెన్నో. మీరు ఫ్లాష్ ఉపయోగించకుండా లేదా ఇవన్నీ చేయవచ్చు జావాస్క్రిప్ట్ .

మంచి అవగాహన కోసం, మీరు క్రింది చిత్రాన్ని చూడవచ్చు:

పై చిత్రంలో, HTML మూలకం ఒక సెకనులో ఎరుపు నుండి నీలం రంగులోకి మారుతుంది. పరివర్తన జరుగుతున్నప్పుడు మీరు ఇంటర్మీడియట్ రంగును కూడా చూస్తారు. మీరు CSS పరివర్తనాలను ఉపయోగించకపోతే, ఎరుపు నుండి నీలం రంగులో మార్పు తక్షణం అని మీరు గమనించవచ్చు - మీరు ఇంటర్మీడియట్ రంగును చూడలేరు. CSS పరివర్తనాలతో, HTML అంశాలు పాత స్థితి నుండి క్రొత్తదానికి మారుతున్నప్పుడు మీరు యానిమేటెడ్ ప్రభావాన్ని గమనించవచ్చు.

c లో లింక్డ్ జాబితాను సృష్టించండి

పరివర్తన ఆస్తి

CSS పరివర్తనాలను నియంత్రించడానికి మీరు సంక్షిప్తలిపి పరివర్తన ఆస్తిని ఉపయోగించవచ్చు. ఈ సంక్షిప్తలిపిని ఉపయోగించడం సులభం కాదు, కానీ ఇది CSS లో డీబగ్ చేయడానికి చాలా నిరాశపరిచే సమకాలీకరణ వెలుపల పారామితులను కూడా నివారించవచ్చు.

పరివర్తన-ఆస్తి మీరు పరివర్తన ప్రభావాన్ని కోరుకునే CSS లక్షణాలను నిర్దేశిస్తుంది. ఈ CSS లక్షణాలు మాత్రమే యానిమేట్ చేయబడ్డాయి.

సింటాక్స్:

పరివర్తన:

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

div {width: 100px height: 100px background: lightblue పరివర్తన-ఆస్తి: వెడల్పు పరివర్తన-వ్యవధి: 2s పరివర్తన-సమయ-ఫంక్షన్: సరళ పరివర్తన-ఆలస్యం: 1s} div: హోవర్ {వెడల్పు: 300px}
పెట్టెపై ఉంచండి
 

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

మీరు ఏమి పేర్కొనాలి?

CSS పరివర్తనాలను సృష్టించడానికి మీరు ప్రధానంగా పేర్కొనవలసిన రెండు విషయాలు ఉన్నాయి: ఒక ప్రభావాన్ని జోడించాలనుకునే CSS ఆస్తి మరియు ఆ ప్రభావ కాల వ్యవధి.మీరు ఒక విషయాన్ని గుర్తుంచుకోవాలి - మీరు సమయ వ్యవధిని పేర్కొననప్పుడు, పరివర్తన అప్రమేయ విలువను తీసుకుంటుంది 0 , మరియు ఎటువంటి ప్రభావం ఉండదు.

ఒక ఉదాహరణను పరిశీలిద్దాం:

దిగువ కోడ్ ఐదు సెకన్ల వ్యవధిలో వెడల్పు ఆస్తి యొక్క పరివర్తన ప్రభావాన్ని నిర్వచిస్తుంది.

div {width: 100px height: 100px background: blue పరివర్తన: వెడల్పు 5s} div: హోవర్ {వెడల్పు: 600px}
పరివర్తన ప్రభావాన్ని చూడటానికి, పైన ఉన్న div మూలకంపై కర్సర్‌ను తరలించండి.
 

పై కోడ్‌లో, మీరు మీ కర్సర్‌ను నీలి పెట్టెపై ఉంచినప్పుడు, నీలి పెట్టె దాని వెడల్పును క్రమంగా ఐదు సెకన్ల వరకు పెంచుతుందని మీరు చూస్తారు. మీరు కర్సర్ను నీలి పెట్టె నుండి తీసివేసినప్పుడు, నీలి పెట్టె క్రమంగా దాని అసలు పరిమాణానికి తిరిగి వస్తుంది (తక్షణమే కాదు). ఈ పరివర్తన ఆస్తి HTML మూలకాన్ని ఎలా ప్రభావితం చేస్తుందో చూడటానికి మీరు వెడల్పు మరియు సమయ వ్యవధి కోసం విలువలను కూడా మార్చవచ్చు.

మీరు ఒకటి కంటే ఎక్కువ ఆస్తికి పరివర్తన ప్రభావాన్ని కూడా జోడించవచ్చు. లక్షణాలను వేరు చేయడానికి మీరు కామాలతో ఉపయోగించడం ద్వారా చేయవచ్చు. ఒక ఉదాహరణను పరిశీలిద్దాం:

దిగువ కోడ్‌లో, పరివర్తన ఆస్తి వెడల్పు, ఎత్తు మరియు పరివర్తన కోసం పేర్కొనబడింది.

div {padding: 15px వెడల్పు: 150px ఎత్తు: 100px నేపథ్యం: ఆకుపచ్చ పరివర్తన: వెడల్పు 2 సె, ఎత్తు 2 సె, రూపాంతరం 2s} div: హోవర్ {వెడల్పు: 300px ఎత్తు: 200px పరివర్తన: తిప్పండి (360deg)} హలో వరల్డ్ 
(హోవర్ ఓవర్ మి)
 

పై ఉదాహరణతో, మీరు పెట్టెపై హోవర్ చేసినప్పుడు గ్రీన్ బాక్స్ ఎలా కదులుతుందో మీరు చూస్తారు.

మేము ఆస్తి మరియు సమయ వ్యవధిని మాత్రమే పేర్కొన్నాము. వివిధ ఉదాహరణలతో ఇతర పారామితులను చూద్దాం.

పరివర్తన-సమయ-ఫంక్షన్ ఫంక్షన్ ఆస్తి

ఈ ఆస్తి పరివర్తన ప్రభావం కోసం వేగ వక్రతను నిర్వచిస్తుంది. ఇది క్రింది విలువలను తీసుకోవచ్చు:

• విలువను సులభతరం చేయండి: ఇది డిఫాల్ట్ విలువ, ఇక్కడ ప్రభావం ప్రారంభంలో నెమ్మదిగా ఉంటుంది, తరువాత వేగంగా మరియు నెమ్మదిగా ముగుస్తుంది.
• సరళ విలువ: ఈ ప్రభావం పరివర్తన వేగం మారదు - ఇది ప్రారంభం నుండి చివరి వరకు వేగాన్ని స్థిరంగా ఉంచుతుంది.
• సులభంగా విలువ: ఈ ప్రభావం నెమ్మదిగా ప్రారంభమవుతుంది.
• సులువు విలువ: ఈ ప్రభావం నెమ్మదిగా ఉంటుంది.
• సులభంగా విలువ: ఈ ప్రభావం నెమ్మదిగా ప్రారంభంతో పాటు నెమ్మదిగా ఉంటుంది.
• క్యూబిక్-బెజియర్ విలువ (n, n, n, n): క్యూబిక్-బెజియర్ ఫంక్షన్‌లో మీరు మీ స్వంత విలువలను పేర్కొనవచ్చు.

దిగువ కోడ్ సరళ, సౌలభ్యం, సౌలభ్యం, సౌలభ్యం మరియు తేలికైన విలువలకు పరివర్తన ప్రభావాలను చూపుతుంది.

div {width: 100px height: 100px background: పింక్ పరివర్తనం: వెడల్పు 2s} # div1 {పరివర్తన-సమయ-ఫంక్షన్: సరళ} # div2 {పరివర్తన-సమయ-ఫంక్షన్: సౌలభ్యం} # div3 {పరివర్తన-సమయ-ఫంక్షన్: సౌలభ్యం } # div4 {పరివర్తన-సమయ-ఫంక్షన్: సౌలభ్యం} # div5 {పరివర్తన-సమయ-ఫంక్షన్: సౌలభ్యం-అవుట్} div: హోవర్ {వెడల్పు: 300px}
దిగువ div మూలకాలపై ఉంచండి
సరళ 
సులభం 
సౌలభ్యం 
సౌలభ్యం 
సులభంగా-అవుట్ 
 

పరివర్తన-ఆలస్యం ఆస్తి

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

పరివర్తన ప్రభావంలో ఆలస్యాన్ని చూడటానికి ఒక ఉదాహరణ తీసుకుందాం:

div {width: 100px height: 100px background: పసుపు పరివర్తన: వెడల్పు 3s పరివర్తన-ఆలస్యం: 1 సె} div: హోవర్ {వెడల్పు: 300px}
క్రింద ఉన్న div మూలకంపై ఉంచండి
 
 గమనిక: ప్రభావం ప్రారంభమయ్యే ముందు 1 సెకన్ల ఆలస్యాన్ని మీరు గమనించవచ్చు
 

పై కోడ్‌లో, మీరు మీ కర్సర్‌తో పసుపు పెట్టెపై హోవర్ చేసినప్పుడు, ఎటువంటి ప్రభావం లేదని మీరు గమనించవచ్చు (ఒక సెకనుకు). ఒక సెకను వేచి ఉన్న తరువాత, మీరు ప్రభావాన్ని గమనించవచ్చు.

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

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

మాకు ప్రశ్న ఉందా? దయచేసి దీనిని 'CSS పరివర్తన' బ్లాగ్ యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.