ఈ కథనం ఒకే సమయంలో బహుళ CSS యానిమేషన్‌లను ప్లే చేయడానికి/జోడించడానికి ఒక ఆచరణాత్మక ప్రదర్శనను ప్రదర్శిస్తుంది.
ఒకే సమయంలో బహుళ CSS యానిమేషన్‌లను ప్లే చేయడం ఎలా?
ఒకే సమయంలో బహుళ CSS యానిమేషన్‌లను వర్తింపజేయడం ద్వారా, డెవలపర్‌లు మరింత ఆకర్షణీయమైన ఇంటర్‌ఫేస్‌లను సులభంగా సృష్టించవచ్చు. ఒకే సమయంలో అనేక CSS యానిమేషన్‌లను ప్లే చేయడానికి, ప్రతిదానికి ఒక ప్రత్యేక పేరు ఇవ్వండి మరియు ఆ పేర్లను పేజీలోని ఒకే లేదా ప్రత్యేక భాగాలకు వర్తింపజేయండి.
ఒకే సమయంలో ఒకటి కంటే ఎక్కువ యానిమేషన్‌లను ప్లే చేయడానికి/జోడించడానికి క్రింది విధానాన్ని అనుసరించండి.
దశ 1: నిర్మాణాన్ని సృష్టించడం
ముందుగా, రాబోయే దశల్లో యానిమేషన్లు వర్తించే HTML మూలకాన్ని సృష్టించండి. ఉదాహరణకు, చిత్రం చొప్పించబడుతోంది:
< div తరగతి = 'వ్యవధి' >
< img src = 'book.jpg' ఎత్తు = '100px' వెడల్పు = '100px' తరగతి = 'యానిమేట్' >
< / div >
పై కోడ్ స్నిప్పెట్‌లో:
- మొదట, చిత్ర మార్గం 'కి సెట్ చేయబడింది src ' గుణం.
- తరువాత, ' విలువ 100px ” CSS “వెడల్పు” మరియు “ఎత్తు” లక్షణాలకు అందించబడింది.
- అలాగే, ' విలువను సెట్ చేయండి యానిమేట్ ' కు ' తరగతి ' గుణం.
దశ 2: యానిమేషన్‌లను సెటప్ చేయడం
ది ' కీఫ్రేమ్‌లు ” వెబ్‌పేజీ అవసరానికి అనుగుణంగా అనుకూల యానిమేషన్‌లను రూపొందించడానికి ఉపయోగించబడతాయి. ఉదాహరణకు, దిగువ కోడ్ స్నిప్పెట్‌లో రెండు యానిమేషన్లు సృష్టించబడ్డాయి:
@-webkit-keyframes స్పిన్ {100 % {
రూపాంతరం: తిప్పు ( 180డిగ్రీలు ) ;
}
}
@-webkit-keyframes స్కేల్ {
100 % {
రూపాంతరం: స్కేల్ఎక్స్ ( 1 ) స్కేల్Y ( 1 ) ;
}
}
పై కోడ్ స్నిప్పెట్‌లో:
- మొదట, ' @-webkit-keyframes 'మెకానిజం ఏర్పాటు చేయడానికి ఉపయోగించబడుతోంది' స్పిన్ 'మరియు' తిప్పండి ” అనే యానిమేషన్లు.
- తరువాత, 'ని ఉపయోగించండి రూపాంతరం చెందుతాయి 'విలువ కలిగిన ఆస్తి' తిప్పు() ' లో ' స్పిన్ ”యానిమేషన్ బాడీ. ఈ ఫంక్షన్ మూలకాన్ని ' కోణంలో తిప్పుతుంది 180డిగ్రీలు ”.
- ఆ తర్వాత, అసలు మూలకాన్ని పెంచే లేదా విస్తరించే యానిమేషన్‌ను '' 1 'రెండింటిలో' X 'మరియు' మరియు ''లో అక్షం స్థాయి ”యానిమేషన్ బాడీ.
దశ 3: HTML మూలకాలపై యానిమేషన్‌ని వర్తింపజేయడం
CSS భాగం లోపల, '' తరగతిని ఎంచుకోండి యానిమేట్ 'ఇది 'కి కేటాయించబడింది ” ట్యాగ్ చేసి, కింది CSS లక్షణాలను అందించండి:
స్థానం: సంపూర్ణ;
ఎడమ: 60 %;
వెడల్పు : 110px;
ఎత్తు : 110px;
మార్జిన్: -40px 0 0 -40px;
-webkit-యానిమేషన్: స్కేల్ 3s అనంతమైన సరళ;
-webkit-యానిమేషన్: స్పిన్ 2s అనంతమైన సరళ;
}
పై కోడ్ బ్లాక్‌లో ఉపయోగించిన లక్షణాల వివరణ:
- ముందుగా, ' విలువను సెట్ చేయండి సంపూర్ణ 'CSSకి' స్థానం ”ఆస్తి. ఇది సమలేఖనం చేస్తుంది ' img ” యానిమేషన్ ప్రకారం మూలకం.
- అప్పుడు, '' విలువలను అందించండి 60% ',' 110px 'మరియు' 110px 'CSSకి' వదిలేశారు ',' వెడల్పు 'మరియు' ఎత్తు 'గుణాలు. మూలకం యొక్క స్థానం మరియు పరిమాణాన్ని సెట్ చేయడానికి ఈ లక్షణాలు ఉపయోగించబడతాయి.
- ఆ తర్వాత, ' విలువను సెట్ చేయండి స్కేల్ 3s అనంతం సరళ ' కు ' -వెబ్‌కిట్-యానిమేషన్ ” CSS ఆస్తి.
- ఇంకా ' 3సె ” అనేది ఆ యానిమేషన్ యొక్క వ్యవధి, అనంతం ” అనేది యానిమేషన్ వ్యవధి, మరియు “ సరళ ” అనేది యానిమేషన్ యొక్క దిశ.
- ముగింపులో, '' విలువలను అందించండి స్పిన్ 2s అనంతమైన సరళ 'CSSకి' -వెబ్‌కిట్-యానిమేషన్ ”ఆస్తి. ఈ ప్రాపర్టీ '' పేరుతో రెండవ యానిమేషన్‌ను జోడిస్తుంది స్పిన్ 'పై' img ' మూలకం.
పై కోడ్ బ్లాక్ యొక్క సంకలనం తర్వాత, యానిమేషన్ ఇలా కనిపిస్తుంది:
పై gif దానిని మాత్రమే వివరిస్తుంది ' స్పిన్ టార్గెటెడ్ ఎలిమెంట్‌పై యానిమేషన్ ప్లే అవుతోంది.
దశ 4: HTML మూలకాలపై బహుళ యానిమేషన్‌లను ప్లే చేయడం
పై దశలో వలె, మూలకానికి ఒక యానిమేషన్ మాత్రమే వర్తింపజేయబడింది. ఎందుకంటే ఒకే 'కి బహుళ విలువలు కేటాయించబడ్డాయి -వెబ్‌కిట్-యానిమేషన్ ”ఆస్తి.
ఈ సమస్యను పరిష్కరించడానికి, లక్ష్య మూలకాన్ని మరొక HTML మూలకంతో చుట్టండి. గా ' div ” ఇప్పటికే మొదటి దశలో రేపర్‌గా ఉపయోగించబడింది, దాన్ని ఎంచుకోండి “ వ్యవధి ” మరియు కోడ్‌ని అప్‌డేట్ చేయండి:
.యానిమేట్ {స్థానం: సంపూర్ణ;
ఎడమ: 60 %;
వెడల్పు : 110px;
ఎత్తు : 110px;
మార్జిన్:-40px 0 0 -40px;
-webkit-యానిమేషన్: స్కేల్ 3s అనంతమైన సరళ;
}
. వ్యవధి {
స్థానం: బంధువు;
టాప్: 160px;
-webkit-యానిమేషన్: స్పిన్ 2s అనంతమైన సరళ;
}
పై కోడ్‌లో:
- మొదట, ' యానిమేట్ 'తరగతి అలాగే ఉంటుంది మరియు దాని నుండి రెండవ యానిమేషన్ మాత్రమే తీసివేయబడుతుంది, అది ' వ్యవధి ” తరగతి.
- ఆ తర్వాత, “ని ఉపయోగించడం ద్వారా స్థానాన్ని సెట్ చేయండి స్థానం 'మరియు' టాప్ 'గుణాలు.
ఎగువ కోడ్ స్నిప్పెట్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇప్పుడు ఇలా కనిపిస్తుంది:
రెండు యానిమేషన్లు ఒకే సమయంలో ఎంచుకున్న HTML మూలకానికి వర్తింపజేయబడినట్లు అవుట్‌పుట్ చూపిస్తుంది.
ముగింపు
బహుళ CSS లక్షణాలను వర్తింపజేయడానికి, మూలకాన్ని HTML మూలకాలతో చుట్టండి మరియు వాటికి యానిమేషన్‌లను వర్తింపజేయండి, తద్వారా ప్రతి HTML మూలకం ఒకే యానిమేషన్‌ను కలిగి ఉంటుంది. మాతృ HTML మూలకంపై వర్తించే యానిమేషన్‌ను చైల్డ్ ప్రాపర్టీ సంక్రమించినందున, కంపైలర్‌కు లోపాలు లేదా అస్పష్టత లేకుండా బహుళ యానిమేషన్లు వర్తింపజేయబడతాయి. అదే సమయంలో ఒకటి కంటే ఎక్కువ CSS యానిమేషన్‌లను ప్లే/జోడించే విధానం.