HTML భాష వెబ్ పేజీ యొక్క నిర్మాణాన్ని అందిస్తుంది మరియు CSS ఆ అప్లికేషన్ యొక్క డిజైన్ మరియు ఫార్మాటింగ్‌ను అందిస్తుంది. ఈ కలయిక యానిమేషన్‌ను జోడించడానికి మిమ్మల్ని అనుమతిస్తుంది, ఎందుకంటే యానిమేటెడ్ మూలకాలు స్టాటిక్ ఎలిమెంట్‌లతో పోలిస్తే మరింత ఆకర్షణీయంగా కనిపిస్తాయి. ఇది ఒక మూలకం దాని శైలిని క్రమంగా మార్చుకోవడానికి కూడా అనుమతిస్తుంది.
మూలకాలకు యానిమేషన్‌ను ఎలా అన్వయించవచ్చో ఈ కథనం మార్గనిర్దేశం చేస్తుంది. కాబట్టి, ప్రారంభిద్దాం!
CSS యానిమేషన్ కీఫ్రేమ్‌లు అంటే ఏమిటి?
యానిమేషన్ పూర్తి చేయడానికి, మేము తప్పనిసరిగా యానిమేషన్‌ను HTML మూలకానికి బంధించాలి. ఈ ప్రయోజనం కోసం, కీవర్డ్ ఉపయోగించండి ' @కీఫ్రేమ్‌లు ” తర్వాత యానిమేషన్ పేరు. ఈ భాగం యానిమేషన్ ప్రారంభం మరియు ముగింపును నిర్దేశిస్తుంది.
CSS యానిమేషన్ కీఫ్రేమ్‌లను ఎలా సెటప్ చేయాలి?
CSSలో యానిమేషన్ కీఫ్రేమ్‌లను సెటప్ చేయడానికి, మేము రెండు ఉదాహరణల ద్వారా వెళ్తాము.
ఉదాహరణ 1
CSSలో యానిమేషన్ కీఫ్రేమ్‌లను సెటప్ చేయడానికి, ఈ క్రింది దశలను చేయండి:
-
- తరగతి పేరు ఉన్న ని జోడించండి ప్రధాన-డివి ”.
- div లోపల, తరగతి పేరుతో మరొక DIVని జోడించండి “ img-పెంగ్ ”.
- ఈ img-peng div లోపల, చిత్రాన్ని ఉంచడానికి
ని జోడించండి. ఈ ట్యాగ్ మూడు లక్షణాలను కలిగి ఉంది, ' src చిత్ర మార్గాన్ని అందించడానికి 'లక్షణం,' ప్రతిదీ ” అనేది చిత్రం ప్రదర్శించబడకపోతే జోడించబడే ప్రత్యామ్నాయ వచనం, మరియు “ వెడల్పు ” చిత్రం వెడల్పును అందించడానికి లక్షణం.
HTML
< div తరగతి = 'ప్రధాన-డివి' >
< div తరగతి = 'img-peng' >
< img src = 'images/penguin.png' ప్రతిదీ = 'పెంగ్విన్' వెడల్పు = '100' >
div >
div >
.ప్రధాన-డివి {
CSS
వెడల్పు: 90 % ;
ఎత్తు: 90px;
నేపథ్య రంగు: rgb ( 67 , 66 , 87 ) ;
మార్జిన్: 20px ఆటో;
పాడింగ్: 10px;
}
CSS లో, ' .ప్రధాన-డివి ' div తరగతిని యాక్సెస్ చేయడానికి జోడించబడింది. దీనికి వర్తించే లక్షణాలు క్రింద వివరించబడ్డాయి:-
- ' వెడల్పు ”ఆస్తి విలువ div వెడల్పును నిర్వచిస్తుంది.
- ' ఎత్తు 'డివి ఎత్తును సెట్ చేయడానికి ఆస్తి ఉపయోగించబడుతుంది.
- ' నేపథ్య రంగు ” లక్షణం మూలకం యొక్క నేపథ్యానికి రంగును వర్తిస్తుంది.
- ' మార్జిన్ ” గా సెట్ చేయబడింది 20px కారు ”, ఇది ఎగువ మరియు దిగువ నుండి ఖాళీని సూచిస్తుంది మరియు ఆటో అంటే ఎడమ మరియు కుడి నుండి సమాన స్థలాన్ని సూచిస్తుంది.
- ' పాడింగ్ ”ప్రాపర్టీ విలువ 10pxగా కేటాయించబడింది, ఇది మూలకం కంటెంట్ చుట్టూ ఖాళీని వర్తిస్తుంది.
శైలి img-పెంగ్ క్లాస్
.img-peng {
వెడల్పు: 50px;
ఎత్తు: 100px;
స్థానం: బంధువు;
యానిమేషన్: షేక్;
యానిమేషన్-వ్యవధి: 2సె;
యానిమేషన్-టైమింగ్-ఫంక్షన్: 2సె;
యానిమేషన్-ఇటరేషన్-కౌంట్: అనంతం;
}
ది ' .img-peng ” పై HTML ఫైల్‌లో పేర్కొన్న div తరగతిని యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది. ఈ div మూలకం క్రింద చర్చించబడిన లక్షణాలతో రూపొందించబడింది:-
- ' వెడల్పు మూలకం యొక్క వెడల్పును సెట్ చేయడానికి ఆస్తి విలువ ఉపయోగించబడుతుంది.
- ' ఎత్తు మూలకం యొక్క ఎత్తును సెట్ చేయడానికి ఆస్తి విలువ ఉపయోగించబడుతుంది.
- ' స్థానం 'ఆస్తి విలువ కేటాయించబడింది' బంధువు ”, అంటే అది దాని సాధారణ స్థానానికి సంబంధించి ఉంచబడుతుంది.
- ' యానిమేషన్ 'పేరు ఇలా ఇవ్వబడింది' వణుకు ”. అయితే, మీరు అవసరాన్ని బట్టి యానిమేషన్‌కు పేరు పెట్టవచ్చు.
- ' యానిమేషన్-వ్యవధి ” యానిమేషన్ వ్యవధిని సూచిస్తుంది, ఇది 2 సెకన్లు.
- ' యానిమేషన్-టైమింగ్-ఫంక్షన్ ”కి 2సె విలువ కేటాయించబడింది అంటే 2 సెకన్లలో యానిమేషన్ పూర్తవుతుంది.
- ' యానిమేషన్-పునరుక్తి-గణన ” అనంతంగా సెట్ చేయబడింది, అంటే ఈ యానిమేషన్ అనంతమైన సమయంలో జరుగుతుంది.
కీలకపదాలతో మరియు నుండి @keyframes నిర్వచించండి
@ కీఫ్రేమ్‌లు వణుకుతున్నాయి {
నుండి {
టాప్: 50px;
}
కు {
అంచు-దిగువ: 200px;
}
}
చిత్రానికి సెట్ చేయబడిన యానిమేషన్ కీఫ్రేమ్‌ల వివరణ క్రింద జాబితా చేయబడింది:-
- ' @keyframes షేక్ ” అనేది యానిమేషన్ పేరు షేక్‌ని సూచిస్తుంది, దాని తర్వాత @keyframes అనే కీవర్డ్ ఉంటుంది. ఈ నియమం లోపల, యానిమేషన్ యొక్క ప్రవర్తన పేర్కొనబడింది.
- దాని కర్లీ బ్రాకెట్ల లోపల, ' నుండి 'మరియు' కు ” కీలకపదాలు యానిమేషన్ ప్రవర్తనను నిర్వచించడానికి వేర్వేరు విరామాలను పేర్కొంటాయి.
- ది ' టాప్ ” ఆస్తికి 50px విలువ కేటాయించబడింది, అంటే యానిమేషన్ స్క్రీన్ పై నుండి 50px నుండి మొదలై దిగువన 200px వరకు కొనసాగుతుంది.
ఫలితంగా, మీరు ఈ క్రింది అవుట్‌పుట్‌ను చూస్తారు:
ఇప్పుడు, యానిమేషన్ వేర్వేరు వ్యవధిలో విభిన్నంగా ప్రవర్తించనివ్వండి. అలా చేయడానికి, @keyframesలోని యానిమేషన్ శాతాలను ఉపయోగించండి.శాతాలతో @keyframesని పేర్కొనండి
@ కీఫ్రేమ్‌లు వణుకుతున్నాయి {
0 % {
ఎడమ: -50px ;
}
25 % {
ఎడమ: 50px;
}
యాభై % {
ఎడమ: -25px ;
}
75 % {
ఎడమ: 25px;
}
100 % {
ఎడమ: 10px;
}
}
కాబట్టి, పై కోడ్ స్నిప్పెట్ యొక్క వివరణ ఇక్కడ పేర్కొనబడింది:-
- 0%, 25%, 50%, 75% మరియు 100% శాతం విలువలు వివిధ విరామాలలో యానిమేషన్‌ను సూచిస్తాయి.
- అంతేకాకుండా, 0% వద్ద, చిత్రం యొక్క ఎడమ వైపున ఉన్న స్థలం “ -50px ”. 25% వద్ద, ఎడమవైపు స్థలం ' 50px ”. 50% వద్ద, ఎడమవైపు స్థలం ' -25px ”. 75% వద్ద, ఎడమ స్థలం ' 25px ”, మరియు యానిమేషన్ పూర్తయినప్పుడు (100%), ఎడమ స్థలం “ 10px ”.
పై కోడ్ కింది యానిమేషన్‌ను ప్రదర్శిస్తుంది:
చిత్రాలకు యానిమేషన్లను ఎలా సెట్ చేయవచ్చో చూడటానికి మరొక ఉదాహరణను తీసుకుందాం.ఉదాహరణ 2
HTMLలో, 'క్లాస్ పేరు గల
ని జోడించండి ప్రధాన పేజీ ”. ఈమూలకం లోపల, తరగతులతో మరో రెండు div ట్యాగ్‌లను ఉంచండి “ మేఘం1 'మరియు' మేఘం2 ”, వరుసగా.HTML
< div తరగతి = 'ప్రధాన పేజీ' >
< div తరగతి = 'క్లౌడ్1' > div >
< div తరగతి = 'క్లౌడ్2' > div >
div >
శరీరం {
CSS
అంచు: 0 ;
పాడింగ్: 0 ;
}
CSSలో, మేము ఈ క్రింది CSS లక్షణాలను శరీర మూలకానికి కేటాయిస్తాము:-
- ' మార్జిన్ ” 0 వంటి లక్షణం మూలకం చుట్టూ ఖాళీని పేర్కొనదు.
- ' పాడింగ్ ” విలువ 0తో ఉన్న ఆస్తి మూలకం కంటెంట్ చుట్టూ ఖాళీని పేర్కొనదు.
శైలి ప్రధాన పేజీ div
.ప్రధాన పేజీ {
నేపథ్య చిత్రం: url ( / చిత్రాలు / wolf-night.png ) ;
నేపథ్యం-పునరావృతం: నో-రిపీట్;
నేపథ్య పరిమాణం: కవర్;
ఎత్తు: 100vh;
స్థానం: బంధువు;
పొంగి: దాచిన;
}
ఇక్కడ:-
- ' .ప్రధాన పేజీ ' div తరగతిని యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది.
- ' నేపథ్య చిత్రం 'ఆస్తి విలువ కేటాయించబడింది' url(/images/wolf-night.png) ” ఇక్కడ ఇమేజెస్ అనేది wolf-night.png చిత్రాన్ని కలిగి ఉన్న ఫోల్డర్.
- ' నేపథ్య-పునరావృతం 'ఆస్తి విలువ కేటాయించబడింది' పునరావృతం కాదు , అంటే చిత్రం ఒకసారి ప్రదర్శించబడుతుంది.
- ' నేపథ్య పరిమాణం ''గా సెట్ చేయబడింది కవర్ ” పూర్తి div మూలకాన్ని పూరించడానికి.
- ' ఎత్తు ” అనేది 100vh, ఇది వ్యూపోర్ట్ ఎత్తులో 100%.
- ' స్థానం ” బంధువు చిత్రం స్థానాన్ని దాని ప్రస్తుత స్థానానికి సంబంధించి సెట్ చేస్తుంది.
- ' పొంగిపొర్లుతున్నాయి కంటైనర్‌లో సరిపోయేంత పెద్దగా ఉన్న ఇమేజ్ భాగాన్ని దాచడానికి ఆస్తి విలువ దాచబడినట్లుగా సెట్ చేయబడింది.
శైలి cloud1 తరగతి
.Cloud1 {
నేపథ్య చిత్రం: url ( / చిత్రాలు / cloud.png ) ;
నేపథ్య పరిమాణం: కలిగి;
నేపథ్యం-పునరావృతం: నో-రిపీట్;
స్థానం: సంపూర్ణ;
టాప్: 100px;
వెడల్పు: 500px;
ఎత్తు: 300px;
యానిమేషన్: cloudanimation1;
యానిమేషన్-వ్యవధి: 70సె;
యానిమేషన్-ఇటరేషన్-కౌంట్: అనంతం;
}
div తరగతి cloud1 క్రింది వివరించిన లక్షణాలతో వర్తించబడుతుంది:-
- ' .మేఘం1 'డివి క్లాస్ క్లౌడ్1ని యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది.
- ' నేపథ్య చిత్రం ”ప్రాపర్టీ url(/images/cloud.png)గా సెట్ చేయబడింది, ఇక్కడ ఇమేజ్‌లు అనేవి చిత్రం cloud.pngని కలిగి ఉన్న ఫోల్డర్.
- ' నేపథ్య పరిమాణం 'విలువతో' కలిగి ” చిత్రం యొక్క దృశ్యమానతను నిర్ధారిస్తుంది.
- ' నేపథ్య-పునరావృతం 'విలువతో ఆస్తి'గా సెట్ చేయబడింది పునరావృతం కాదు ” చిత్రాన్ని పునరావృతం కానిదిగా ప్రదర్శిస్తుంది.
- ' స్థానం ” చిత్రం దాని పేరెంట్ ఎలిమెంట్‌కు సంబంధించి సంపూర్ణ స్థానాలుగా ఉంటుంది.
- ' టాప్ ” ప్రాపర్టీ చిత్రాన్ని పై నుండి 100px వద్ద సెట్ చేస్తుంది.
- ' వెడల్పు div మూలకం యొక్క వెడల్పును 500pxకి సెట్ చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది.
- ' ఎత్తు div మూలకం యొక్క ఎత్తును 300pxకి సెట్ చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది.
- ' యానిమేషన్ ”కి cloudanimation1 అనే పేరు కేటాయించబడింది.
- ' యానిమేషన్-వ్యవధి ” యానిమేషన్ వ్యవధిని సూచిస్తుంది, ఇది 70 సెకన్లు.
- ' యానిమేషన్-పునరుక్తి-గణన ”కి అనంతమైన విలువ కేటాయించబడింది, ఇది యానిమేషన్‌ను అనంతమైన సార్లు పునరావృతం చేస్తుంది.
ఇప్పటివరకు, మేము div తరగతి ప్రధాన పేజీ మరియు cloud1కి CSS లక్షణాలను వర్తింపజేసాము. ఇప్పుడు, తదుపరి విభాగంలో, మేము cloud2 పేరుతో తదుపరి div తరగతిని స్టైల్ చేస్తాము.
శైలి cloud2 తరగతి
.మేఘం2 {
నేపథ్య చిత్రం: url ( / చిత్రాలు / cloud.png ) ;
నేపథ్య పరిమాణం: కలిగి;
నేపథ్యం-పునరావృతం: నో-రిపీట్;
స్థానం: సంపూర్ణ;
టాప్: 50px;
వెడల్పు: 200px;
ఎత్తు: 300px;
యానిమేషన్: cloudanimation2;
యానిమేషన్-వ్యవధి: 15సె;
యానిమేషన్-ఇటరేషన్-కౌంట్: అనంతం;
}
దిగువ వివరించిన లక్షణాలతో div తరగతి cloud2 వర్తించబడుతుంది:-
- ' .మేఘం2 ” క్లాస్ క్లౌడ్2ని యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది.
- ' నేపథ్య చిత్రం ” ఆస్తి url(/images/cloud.png)గా సెట్ చేయబడింది, ఇక్కడ చిత్రం cloud.png చిత్రాన్ని కలిగి ఉన్న ఫోల్డర్.
- ' నేపథ్య పరిమాణం ” చిత్రం యొక్క దృశ్యమానతను నిర్ధారించే విలువను కలిగి ఉంటుంది.
- ' నేపథ్య-పునరావృతం ”నో-రిపీట్‌గా సెట్ చేయబడిన విలువతో ప్రాపర్టీ ఇమేజ్‌ని రిపీట్ కానిదిగా ప్రదర్శిస్తుంది.
- ' స్థానం ” చిత్రం దాని పేరెంట్ ఎలిమెంట్‌కు సంబంధించి సంపూర్ణ స్థానాలుగా ఉంటుంది.
- ' టాప్ ” ప్రాపర్టీ చిత్రాన్ని పై నుండి 100px వద్ద సెట్ చేస్తుంది.
- ' వెడల్పు div మూలకం యొక్క వెడల్పును సెట్ చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది.
- ' ఎత్తు 'డివ్ మూలకం యొక్క ఎత్తును సెట్ చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది.
- ' యానిమేషన్ ”కి cloudanimation2 అనే పేరు కేటాయించబడింది.
- ' యానిమేషన్-వ్యవధి ” యానిమేషన్ వ్యవధిని సూచిస్తుంది.
- ' యానిమేషన్-పునరుక్తి-గణన ”కి అనంతమైన విలువ కేటాయించబడింది, ఇది యానిమేషన్‌ను అనంతమైన సార్లు పునరావృతం చేస్తుంది.
cloudanimation1 కోసం @keyframesని పేర్కొనండి
@ కీఫ్రేమ్స్ క్లౌడ్ యానిమేషన్1 {
కు {
ఎడమ: 0px;
}
నుండి {
ఎడమ: 100 % ;
}
}
క్రింద వివరించిన యానిమేషన్‌తో cloud1 div కట్టుబడి ఉంది:-
- ' @keyframes cloudanimation1 ”యానిమేషన్ క్లౌడ్‌నిమేషన్1 పేరు తర్వాత @keyframes అనే కీవర్డ్ ట్రాన్సిషన్‌ని పేర్కొనడానికి ఉపయోగించబడుతుంది.
- @keyframes కీవర్డ్ క్లౌడ్ ఇమేజ్‌లపై యానిమేషన్ ప్రారంభం నుండి చివరి వరకు ఎలా జరుగుతుందో నిర్దేశిస్తుంది.
- ది ' కు 'మరియు' నుండి ” కీలక పదాలు క్లౌడ్1 100% నుండి స్క్రీన్ 0pxకి కదులుతుందని పేర్కొంటాయి.
cloudanimation2 కోసం @keyframesని పేర్కొనండి
@ కీఫ్రేమ్స్ క్లౌడ్ యానిమేషన్2 {
0 % {
ఎడమ: 0 % ;
}
100 % {
ఎడమ: 100 % ;
}
}
div తరగతి cloud2 క్రింద వివరించబడిన యానిమేషన్‌తో అనుబంధించబడింది:-
- ' @keyframes cloudanimation2 ” యానిమేషన్ పేరు cloudanimation2ని సూచిస్తుంది, తర్వాత యానిమేషన్‌ను పేర్కొనడానికి ఉపయోగించే @keyframes కీవర్డ్.
- ది ' 0% 'మరియు' 100% ” యానిమేషన్ ప్రారంభం మరియు ముగింపును సూచిస్తుంది.
- యానిమేషన్‌లో 0% వద్ద, క్లౌడ్ ఎడమవైపున విలువ 0%గా సెట్ చేయబడుతుంది మరియు అది క్రమంగా 100% వెడల్పుకు కదులుతుంది.
అవుట్‌పుట్
అది బాగుంది! @keyframes అనే కీవర్డ్‌ని ఉపయోగించి మూలకాలకు యానిమేషన్‌ని ఎలా పేర్కొనవచ్చో మేము చర్చించాము.ముగింపు
HTML మూలకాలకు శైలులను వర్తింపజేయడానికి CSS మాకు అనుమతినిస్తుంది. CSSలోని యానిమేషన్ ఒక స్టైల్ నుండి మరొక స్టైల్‌కు పరివర్తనలను నిర్వహిస్తుంది. ఇది యానిమేషన్ స్టైల్స్ మరియు కీఫ్రేమ్‌లు అనే రెండు భాగాలను కలిగి ఉంటుంది. యానిమేషన్ శైలులు వాటి పేరు, యానిమేషన్-వ్యవధి, యానిమేషన్-పునరావృత-గణన మరియు మరిన్ని వంటి విభిన్న లక్షణాలను సూచిస్తాయి. అయితే కీఫ్రేమ్ భాగం యానిమేషన్ ప్రారంభం మరియు ముగింపును నిర్వచిస్తుంది. ఈ గైడ్ ఉదాహరణలతో యానిమేషన్ కీఫ్రేమ్‌లను ఎలా సెటప్ చేయాలో వివరించింది.
- తరగతి పేరు ఉన్న