0
0
Tailwindmarkup~8 mins

Duration and timing curves in Tailwind - Performance & Optimization

Choose your learning style9 modes available
Performance: Duration and timing curves
MEDIUM IMPACT
This affects how long animations take and how smoothly they run, impacting user experience and interaction responsiveness.
Animating a button hover effect
Tailwind
button:hover { transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
Short duration with smooth easing gives quick, natural feedback improving interaction feel.
📈 Performance GainReduces input delay to under 200ms, improving INP and user experience
Animating a button hover effect
Tailwind
button:hover { transition-duration: 5s; transition-timing-function: linear; }
Very long duration causes slow feedback; linear timing feels mechanical and less natural.
📉 Performance CostBlocks interaction feedback for 5 seconds, increasing INP and reducing perceived responsiveness
Performance Comparison
PatternDOM OperationsReflowsPaint CostVerdict
Long duration + linear timingMinimalMinimalHigh due to long animation frames[X] Bad
Short duration + smooth cubic-bezierMinimalMinimalLow due to fewer frames and smooth easing[OK] Good
Rendering Pipeline
Duration and timing curves control how the browser interpolates CSS properties over time during animations. The browser calculates intermediate frames during the Layout and Paint stages based on these settings.
Style Calculation
Layout
Paint
Composite
⚠️ BottleneckPaint and Composite stages can become expensive if animations are long or use complex timing functions causing many frames.
Core Web Vital Affected
INP
This affects how long animations take and how smoothly they run, impacting user experience and interaction responsiveness.
Optimization Tips
1Keep animation durations short to avoid blocking user input.
2Use smooth easing curves like cubic-bezier ease-in-out for natural motion.
3Avoid linear timing for UI animations as it feels mechanical and less responsive.
Performance Quiz - 3 Questions
Test your performance knowledge
What is the main performance risk of using very long animation durations?
AIt increases the initial page load time.
BIt causes layout shifts during page load.
CIt delays user interaction feedback and increases input latency.
DIt reduces the size of CSS files.
DevTools: Performance
How to check: Record a performance profile while triggering the animation. Look at the frame rate and main thread activity during the animation duration.
What to look for: Smooth frame rate near 60fps and low main thread blocking indicate good duration and timing curve choices.