ఈ కథనం బహుళ-దశల యానిమేషన్లు మరియు పరివర్తనలను జోడించే ప్రక్రియను ప్రదర్శిస్తుంది.
బహుళ-దశల యానిమేషన్లు మరియు పరివర్తనలను ఎలా ఉపయోగించాలి?
బహుళ-దశల యానిమేషన్ చేయడానికి, కీఫ్రేమ్‌ల శ్రేణి రూపొందించబడుతుంది. ఇది ఎంచుకున్న HTML మూలకానికి వర్తించే మార్పుల శ్రేణిని నిర్దేశిస్తుంది. ప్రతి కీఫ్రేమ్ యానిమేషన్ యొక్క విభిన్న స్థితిని సూచిస్తుంది మరియు బ్రౌజర్ ఈ రాష్ట్రాల మధ్య మూలకాన్ని సజావుగా మారుస్తుంది. పరివర్తన సమయంలో, వినియోగదారు పరస్పర చర్యలు లేదా స్థితి మార్పుల ద్వారా నిర్దిష్ట వ్యవధిలో CSS లక్షణాల యొక్క మృదువైన మార్పును పేర్కొనండి.
మంచి అవగాహన కోసం ఒక ఆచరణాత్మక ఉదాహరణ ద్వారా నడుద్దాం:
ఉదాహరణ 1: బహుళ-దశల యానిమేషన్‌ని వర్తింపజేయడం
ఈ ఉదాహరణలో, ఎంచుకున్న HTML మూలకానికి బహుళ దశల యానిమేషన్ వర్తించబడుతుంది. దిగువ ప్రదర్శనను సందర్శించండి:
< శైలి >
.animationExample {
వెడల్పు: 130px;
ఎత్తు: 130px;
నేపథ్య రంగు: అటవీ ఆకుపచ్చ;
స్థానం: బంధువు;
యానిమేషన్: మూవ్ యానిమేట్ 4ఎస్ ఈజ్-ఇన్-అవుట్ అనంతం;
}
< / శైలి >
< శరీరం >
< div తరగతి = 'యానిమేషన్ ఉదాహరణ' >< / div >
< / శరీరం >
పై కోడ్ స్నిప్పెట్‌లో:
- మొదట, తరగతి పేరు ' యానిమేషన్ ఉదాహరణ '' లోపల ఎంపిక చేయబడింది <శైలి> ” ట్యాగ్.
- తరువాత, ' విలువలు 130px ''కి కేటాయించబడ్డాయి ఎత్తు 'మరియు' వెడల్పు 'గుణాలు.
- అదనంగా, సెట్ ' అటవీ ఆకుపచ్చ 'మరియు' బంధువు ''కి విలువగా నేపథ్య రంగు 'మరియు' స్థానం ”విజువలైజేషన్‌ని మెరుగుపరచడానికి లక్షణాలు.
- ఆ తర్వాత, 'ని ఉపయోగించండి యానిమేషన్ 'ఆస్తి మరియు దానికి సమానంగా సెట్ చేయండి' మూవ్‌యానిమేట్ 4లను అనంతంగా ఈజ్ ఇన్ అవుట్ చేయండి ”యానిమేషన్‌లను వర్తింపజేయడానికి.
- విలువ నాలుగు భాగాలను కలిగి ఉంటుంది, మొదటిది కస్టమ్ నేమ్ యానిమేషన్, రెండవది పూర్తి చేయాల్సిన సమయం, మూడవది యానిమేషన్ రకం మరియు నాల్గవది ఈ యానిమేషన్ ఎన్నిసార్లు వర్తింపజేయబోతోంది అనే పరిమితి.
- చివరికి, ఒక HTML మూలకాన్ని సృష్టించి, “ని కేటాయించండి యానిమేషన్ ఉదాహరణ ” దానికి క్లాస్.
ఇప్పుడు, 'ని ఉపయోగించండి కీఫ్రేమ్‌లు 'ఆచారాన్ని నిర్వచించడానికి నియమం' తరలించు యానిమేట్ ”యానిమేషన్:
@ మూవ్ యానిమేట్ కీఫ్రేమ్‌లు {0 % {
ఎడమ: 0 ;
నేపథ్య రంగు: నీలం;
}
యాభై % {
ఎడమ: 200px;
నేపథ్య రంగు: అటవీ ఆకుపచ్చ;
రూపాంతరం: తిప్పు ( 180డిగ్రీలు ) ;
}
100 % {
ఎడమ: 0 ;
నేపథ్య రంగు: నీలం;
}
}
పై కోడ్ బ్లాక్‌లో:
- మొదట, ' @కీఫ్రేమ్‌లు ”బ్లాక్ నిర్వచించబోయే కస్టమ్ యానిమేషన్ పేరుతో పాటు సృష్టించబడుతుంది.
- తరువాత, ' పేరుతో ఒక బ్లాక్‌ని సృష్టించండి 0% ” ఇది యానిమేషన్ ప్రారంభంలో CSS శైలులను వర్తింపజేస్తుంది. మరియు 'ని ఉపయోగించండి నేపథ్య రంగు 'మరియు' వదిలేశారు ” CSS లక్షణాలు.
- ఇప్పుడు, పేరుతో ఒక బ్లాక్‌ని సృష్టించండి మరియు “ యాభై% ”యానిమేషన్ మధ్యలో స్టైల్ చేయడానికి. ఇది విలువలను అందిస్తుంది ' 200px ',' అటవీ ఆకుపచ్చ 'మరియు' తిప్పు (180డిగ్రీలు) 'ఎడమ', 'నేపథ్యం-రంగు' మరియు 'పరివర్తన' లక్షణాలకు. ఇది ఎంచుకున్న మూలకాన్ని ఎడమ 200pxని తిప్పడానికి అనుమతిస్తుంది.
పై కోడ్ బ్లాక్ సంకలనం తర్వాత:
ఎంచుకున్న HTML మూలకానికి బహుళ-దశల యానిమేషన్ వర్తించబడిందని అవుట్‌పుట్ చూపుతుంది.
ఉదాహరణ 2: బహుళ-దశల పరివర్తనను వర్తింపజేయడం
బహుళ దశల పరివర్తనను వర్తింపజేయడానికి, CSS సెలెక్టర్‌లను ' పరివర్తన ”ఆస్తి. దిగువ కోడ్‌ని సందర్శించండి:
.వాడిపోవు {
అస్పష్టత: 1;
పరివర్తన: అస్పష్టత 1s;
}
.ఫేడ్:హోవర్ {
అస్పష్టత: 0;
}
<
/ శైలి>
<
శరీరం>
< p తరగతి = 'వాడిపోవు' > పరివర్తనను చూడటానికి నాపై హోవర్ చేయండి. < / p >
< / శరీరం >
పై కోడ్ యొక్క వివరణ:
- మొదట, ఆచారం ' వాడిపోవు 'తరగతి ఎంచుకోబడింది మరియు 1 విలువ అందించబడింది' అస్పష్టత ”ఆస్తి. అలాగే, ' విలువను సెట్ చేయండి అస్పష్టత 1సె ' కు ' పరివర్తన ” CSS ఆస్తి. ఇది '' సమయ వ్యవధిలో అస్పష్టతను సెట్ చేస్తుంది లేదా తీసివేస్తుంది 1సె ”.
- తరువాత, ' : హోవర్ 'సెలెక్టర్'కి కేటాయించబడింది వాడిపోవు ” తరగతి. దానిలో, విలువ 0 ”అస్పష్టత ప్రాపర్టీకి సెట్ చేయబడింది.
- చివరికి, HTML మూలకం '' లోపల సృష్టించబడుతుంది <బాడీ> 'ట్యాగ్ మరియు ' తరగతి వాడిపోవు ” అని దానికి జత చేయబడింది.
సంకలన దశ ముగిసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
ఎంచుకున్న HTML మూలకానికి అనుకూల ఫేడ్ పరివర్తన వర్తించబడిందని GIF ప్రదర్శిస్తుంది.
ముగింపు
బహుళ-దశల యానిమేషన్లు మరియు పరివర్తనాలు చలనం మరియు విజువల్ ఎఫెక్ట్‌లను జోడించడం ద్వారా HTML వెబ్ పేజీలకు జీవం పోస్తాయి. యానిమేషన్ కోసం, ' కీఫ్రేమ్‌లు '' వంటి వ్యవధి శాతంతో పాటు ఉపయోగించబడతాయి 0% 'ప్రారంభం,' యాభై% 'మధ్య, మరియు' 100% ” అనేది యానిమేషన్ వ్యవధికి ముగింపు. పరివర్తన కోసం, CSS సెలెక్టర్‌తో పాటు ' పరివర్తన ” తరగతి. ఈ కథనం బహుళ-దశల యానిమేషన్లు మరియు పరివర్తనాలను ఉపయోగించే ప్రక్రియను ప్రదర్శించింది.