Animate.css ఇప్పుడు కొన్ని సంవత్సరాలుగా ఉంది మరియు నేను పార్టీకి చాలా ఆలస్యం అయినట్లు అంగీకరించాలి. కొన్ని CSS యానిమేషన్ ట్యుటోరియల్స్ కోసం నెట్‌లో శోధిస్తున్నప్పుడు నేను కొన్ని నెలల క్రితం మాత్రమే కనుగొన్నాను మరియు యానిమేట్ చేయడానికి వేగవంతమైన, సరళమైన మార్గం ఏమిటో కనుగొన్నాను, Animate.css.
డాన్ ఈడెన్ అనే వ్యక్తి సృష్టించిన, యానిమేట్.సిస్ అనేది CCS ఎలా పనిచేస్తుందో చూడటానికి మరియు మీ వెబ్‌సైట్‌లో కొన్ని యానిమేషన్ చర్యలను పొందడానికి వేగవంతమైన మార్గం.
'జస్ట్-యాడ్ వాటర్ CSS యానిమేషన్' గా వర్ణించబడింది, Animate.css ఒక తీవ్రమైన వైపు సరదాగా ఉంటుంది. ఇది నా లాంటి te త్సాహిక వెబ్ డిజైనర్లను కూడా CSS యానిమేషన్ యొక్క ఫండమెంటల్స్‌తో త్వరగా పట్టుకోవటానికి మరియు వెబ్‌సైట్‌ల కోసం సరళమైన కానీ ప్రభావవంతమైన ప్రభావాలను సృష్టించడానికి అనుమతిస్తుంది. ఒకే యానిమేటెడ్ శీర్షిక నుండి మరింత ప్రమేయం ఉన్న కదలికల వరకు, ఈ సాధనం దీన్ని చేయగలదు.
Animate.css
GitHub నుండి డౌన్‌లోడ్ చేయడానికి Animate.css అందుబాటులో ఉంది మరియు ఇది తప్పనిసరిగా ఒకే చోట సేకరించిన సాధారణ CSS ప్రభావాల లైబ్రరీ. ప్రతి యానిమేషన్ చక్కగా ప్యాక్ చేయబడింది మరియు ఉపయోగించడానికి సిద్ధంగా ఉంది. మీరు చేయాల్సిందల్లా మీకు నచ్చిన యానిమేషన్‌ను కనుగొని తరగతిని వర్తింపజేయడం. అది నిజంగా ఉంది.
2, 500 పంక్తుల కోడ్ ఉన్నందున మీరు కోరుకోకపోతే మీరు మొత్తం లైబ్రరీని డౌన్‌లోడ్ చేయవలసిన అవసరం లేదు. మీరు Animate.css సైట్‌ను సందర్శించవచ్చు, యానిమేషన్‌ను కనుగొని, డౌన్‌లోడ్ Animate.css లింక్‌ని క్లిక్ చేయవచ్చు. మీరు సరిపోయేటట్లు కాపీ చేసి ఉపయోగించటానికి ఇది వెబ్ పేజీలో తరగతిని లోడ్ చేస్తుంది.
GitHub ను ఉపయోగించడం సులభం మరియు మీరు వెతుకుతున్న ప్రభావాన్ని కనుగొనడానికి క్రిందికి రంధ్రం చేయండి.
- CSS GitHub పేజీకి నావిగేట్ చేయండి.
- మూలకాల జాబితాను ప్రాప్యత చేయడానికి మూల లింక్‌పై క్లిక్ చేయండి.
- జాబితా నుండి మీరు వెతుకుతున్న ప్రభావ రకాన్ని ఎంచుకోండి. బౌన్స్ అనేది శ్రద్ధ చూపేవారు, కాబట్టి శ్రద్ధ_సీకర్స్ లింక్‌ను ఎంచుకోండి.
- Bounce.css ఎంచుకోండి.
- యానిమేషన్‌ను వర్తింపచేయడానికి కోడ్‌ను కాపీ చేసి మీ పేజీలో ఉంచండి.
ఇది నిజంగా చాలా సులభం. మీరు వేర్వేరు ప్రభావాల కోసం వేర్వేరు ఎంపికలను స్పష్టంగా ఎంచుకుంటారు, కాని తుది ఫలితం ఒకే విధంగా ఉంటుంది. పేజీలో భారీ లిఫ్టింగ్ చేయడానికి అవసరమైన కోడ్‌కు ప్రాప్యత.
Animate.css తో యానిమేటెడ్ వస్తువును నిర్మించడం
Animate.css తో చల్లగా ఏదైనా నిర్మించడం చాలా సులభం. ఇది CCS కోడ్‌ను కనుగొని మీ స్వంత CSS కు జోడించే విషయం. నేను చేయగలిగితే, ఎవరైనా చేయగలరు!
Animate.css పేజీలోని మొదటి ఎంపిక బౌన్స్, కాబట్టి దీనిని ఈ ఉదాహరణలో ఉపయోగించుకుందాం.
- అతికించండి ' 'లోపల మీ స్టైల్షీట్లో.
- మీకు కావలసిన యానిమేషన్ కోసం CSS ను కనుగొని, మీరు యానిమేట్ చేయదలిచిన మూలకానికి జోడించండి. ఉదాహరణకు, ' 'ఆ బౌన్స్ ప్రభావాన్ని పరీక్షించడానికి, ఒక చిత్రం లేదా ఏమైనా జోడించడానికి.
- ఇవన్నీ పని చేయడానికి క్రింది CSS కోడ్‌ను జోడించండి. పై bounce.css నుండి తీసుకోబడింది.
@keyframes బౌన్స్ {
నుండి, 20%, 53%, 80%, నుండి {
యానిమేషన్-టైమింగ్-ఫంక్షన్: క్యూబిక్-బెజియర్ (0.215, 0.610, 0.355, 1.000);
పరివర్తన: అనువాద 3 డి (0, 0, 0);
}
40%, 43% {
యానిమేషన్-టైమింగ్-ఫంక్షన్: క్యూబిక్-బెజియర్ (0.755, 0.050, 0.855, 0.060);
పరివర్తన: అనువాద 3 డి (0, -30 పిక్స్‌, 0);
}
70% {
యానిమేషన్-టైమింగ్-ఫంక్షన్: క్యూబిక్-బెజియర్ (0.755, 0.050, 0.855, 0.060);
పరివర్తన: అనువాద 3 డి (0, -15 పిక్స్‌, 0);
}
90% {
పరివర్తన: అనువాద 3 డి (0, -4 పిక్స్‌, 0);
}
}
.బౌన్స్ {
యానిమేషన్-పేరు: బౌన్స్;
పరివర్తన-మూలం: మధ్య భాగం;
}
Animate.css తో యానిమేషన్‌ను మరింత తీసుకుంటుంది
పైన పేర్కొన్న క్రమం పేజీ మొదట లోడ్ అయినప్పుడు బౌన్స్ ప్రభావాన్ని జోడిస్తుంది, ఇది బాగుంది కాని ఒక-సమయం విషయం. మేము దానిని హోవర్ చేయడానికి ఎలా జోడించాము. ఆ విధంగా, ఎవరైనా పరీక్షలో చుట్టుముట్టినప్పుడు, అది బౌన్స్ అవుతుంది. ఇది ప్రొడక్షన్ వెబ్‌సైట్‌లో నేను చేసేది కాదు, కానీ ప్రతిదీ ఎలా పనిచేస్తుందో చూపించడానికి ఇది ఒక గొప్ప మార్గం.
హోవర్ ఎఫెక్ట్‌పై బౌన్స్‌ను జోడించడానికి మీ CSS కి క్రింది కోడ్‌ను జోడించండి. మౌస్ మూలకం మీద కదిలిన ప్రతిసారీ, అది బౌన్స్ అవ్వాలి.
.అనిమేటెడ్: హోవర్ {
-వెబ్కిట్-యానిమేషన్-వ్యవధి: 1 సె;
-మోజ్-యానిమేషన్-వ్యవధి: 1 సె;
-ms- యానిమేషన్-వ్యవధి: 1 సె;
-o- యానిమేషన్-వ్యవధి: 1 సె;
యానిమేషన్-వ్యవధి: 1 సె;
-వెబ్కిట్-యానిమేషన్-ఫిల్-మోడ్: రెండూ;
-మోజ్-యానిమేషన్-ఫిల్-మోడ్: రెండూ;
-ms-animation-fill-mode: రెండూ;
-o-animation-fill-mode: రెండూ;
యానిమేషన్-ఫిల్-మోడ్: రెండూ;
}
మీకు CSS తెలిస్తే, వేర్వేరు చర్యలకు వేర్వేరు ప్రభావాలను ఎలా అమలు చేయాలో మీకు నాకన్నా బాగా తెలుస్తుంది. ఒక అనుభవశూన్యుడుగా, ఇది మరియు Animate.css లో అందించబడిన లైబ్రరీలు నా వెబ్ పేజీల కోసం ప్రాథమిక, కానీ ప్రభావవంతమైన యానిమేషన్లను సృష్టించడానికి నాకు సహాయపడతాయి.
లైవ్ వెబ్‌సైట్‌లో నేను ఎన్ని ఉపయోగిస్తానో నాకు తెలియదు ఎందుకంటే అవి ఎల్లప్పుడూ బాగా తగ్గవు మరియు మొబైల్ వినియోగదారులు వాటిని ఎక్కువగా ఇష్టపడటం లేదు. అయినప్పటికీ, CSS ఎలా పనిచేస్తుందో మరియు వెబ్‌ను మెరుగుపరచడానికి ఎలా ఉపయోగించవచ్చో పాఠంగా, ఇది గొప్ప వనరు. నేను ఒక అనుభవశూన్యుడు, కానీ ఈ ట్యుటోరియల్ కోసం Animate.css తో కొన్ని గంటలు గడపడం కూడా నాకు చాలా నేర్పింది. నేను పూర్తి చేయడానికి ముందే దానితో చాలా ఎక్కువ ఆడతాను. మీ గురించి ఎలా?
