ట్రాన్సిషన ఒక ఆస్తిని దాని పాత విలువ నుండి కొత్త విలువకు కాలక్రమేణా సున్నితంగా యానిమేట్ చేస్తుంది, వెంటనే మార్చే బదులు. మీరు ఏమి యానిమేట్ చేయాలి మరియు ఎంత కాలం అని ప్రకటించండి, ఆపై ఆస్తిని మార్చడం ద్వారా దానిని ట్రిగర్ చేయండి (తరచుగా :hover లేదా క్లాస్ ద్వారా).
{
: blue;
: background ease;
}
{
: darkblue;
}
transition: background 0.3s ease 0s;
/* │ │ │ └── delay before starting */
/* │ │ └─────── timing function (the easing curve) */
/* │ └──────────── duration */
/* └─────────────────────── property to animate (or `all`) */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px); /* lifts up */
box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* + deeper shadow */
}
ప్రతి ఆస్తిని (కామా-విభజించినది) జాబితా చేయండి, all ఉపయోగించే బదులు, ఇది మీరు ఉద్దేశం చేయని విషయాలను యానిమేట్ చేయడానికి ప్రమాదకరంగా ఉండవచ్చు మరియు పనితీరును దెబ్బతీయవచ్చు.
transition-timing-function: ease; /* slow-fast-slow (default) */
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* custom curve */
/* ✅ cheap — GPU-composited, no layout recalculation */
transition: transform 0.3s, opacity 0.3s;
/* ❌ expensive — animating width/top/left triggers layout on every frame */
transition: width 0.3s, left 0.3s;
transform మరియు opacity ను యానిమేట్ చేయడానికి ఆదరించండి; అవి లేఅవుట్ను పునరావృతం చేయకుండా కంపోజిటర్ ద్వారా నిర్వహించబడతాయి, కాబట్టి అవి మృదువుగా ఉంటాయి (60 fps).
@media (prefers-reduced-motion: reduce) {
* { transition: none; } /* respect users who get motion sickness */
}
ట్రాన్సిషన్లు UI ను ప్రతిస్పందనీయ మరియు సజీవంగా (హోవర్ ప్రభావాలు, మృదువైన స్థితి మార్పులు) ఒకే లైన్తో అనిపించేలా చేసే పాలిష్ను జోడిస్తాయి.
పనితీరు కోసం transform/opacity ను యానిమేట్ చేయాలి — మరియు prefers-reduced-motion ను గౌరవించాలని తెలుసుకోవడం — మృదువైన, ప్రాప్యమైన కదలికను జాగ్గీ యానిమేషన్ నుండి వేరుచేసేది.