Free tools Windows power users keep installed
One-click scans. No signup required.
Use a CSS transition for a change between two interface states, CSS keyframes for a defined sequence, the Web Animations API (WAAPI) when JavaScript needs to control playback, and requestAnimationFrame() for custom per-frame work such as canvas drawing. Whichever method you choose, animate properties that do not trigger unnecessary rendering work, respect reduced-motion preferences, and test the result on the devices your site supports.
Choose an animation method that fits the job
The choice is less about whether CSS or JavaScript is inherently faster and more about what the effect needs to do. Ask whether it moves between two states or follows a sequence, whether code must control playback, and whether you are styling ordinary DOM elements or drawing custom frames.
| Approach | Best suited to | Use it when |
|---|---|---|
| CSS transition | A change from a current style to a target style | A button, card, or menu should respond smoothly to hover, focus, or another state change. |
| CSS keyframes | A sequence with defined waypoints | You need intermediate states, a delay, direction, easing, or repetition. |
| Web Animations API | DOM animation with programmatic playback control | JavaScript needs to start, pause, reverse, or otherwise control an animation. |
requestAnimationFrame() |
Custom work on each frame | You are drawing to canvas or implementing motion that needs custom per-frame updates. |
For ordinary interface motion, start with CSS. Move to WAAPI when playback control or coordination is a real requirement. Avoid using a timer loop as a substitute for browser-scheduled frame updates.
Make a simple interaction with a CSS transition
A transition interpolates between a property’s current value and a new value when a style change occurs. It is a natural fit for small state changes such as lifting a card when it receives pointer hover or keyboard focus.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
.card {
transform: none;
transition: transform 180ms ease-out;
}
.card:hover,
.card:focus-visible {
transform: translateY(-0.25rem);
}Apply the transition to the resting rule, not only the hover rule: then entering and leaving the state can both animate. The selector includes :focus-visible so keyboard users can receive the same feedback. If the target changes while a transition is in progress, the browser can transition from the current interpolated state toward the new target rather than requiring you to calculate an intermediate value.
Transitions are not a sequence authoring tool. If a movement needs several intermediate waypoints or repeats on its own, define those stages with keyframes instead.
Define a sequence with CSS keyframes
Use @keyframes to describe visual states along a named animation. Animation properties then set its duration, easing, delay, direction, and repetition behavior.
.notice {
animation: arrive 420ms ease-out both;
}
@keyframes arrive {
0% {
opacity: 0;
transform: translateY(0.75rem);
}
70% {
opacity: 1;
transform: translateY(-0.1rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}The middle keyframe creates a waypoint that a simple two-state transition would not express as directly. The both fill mode applies the animation’s relevant endpoint styles during its delay and after it finishes; remove it if you do not want those endpoint styles retained. Avoid making an animation repeat indefinitely unless the movement is useful and users have a way to stop or reduce it.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Control DOM animation with the Web Animations API
Element.animate() starts a DOM animation and returns an Animation object. Retaining that object gives your JavaScript a handle for playback control, which is useful when an animation must pause, reverse, or synchronize with another event.
const animation = document.querySelector(".notice").animate(
[
{ opacity: 0, transform: "translateY(0.75rem)" },
{ opacity: 1, transform: "translateY(0)" },
],
{
duration: 420,
easing: "ease-out",
fill: "both",
},
);
// Call these in response to application controls or events:
// animation.pause();
// animation.play();
// animation.reverse();The keyframes and timing in this example are passed as JavaScript data, while the returned object controls playback. Use this API when those controls need to be dynamic; for a static hover effect, a CSS transition is usually simpler to maintain.
For a custom drawing loop, use requestAnimationFrame() instead. The browser schedules its callback before repaint, making it a more suitable animation loop than repeatedly calling setTimeout() or setInterval(). Keep the callback focused on the frame update, and request another frame only while the animation needs to continue. It is not the default choice for changing ordinary DOM styles that CSS can animate.
Respect reduced-motion preferences
Honor the operating system or browser preference expressed by prefers-reduced-motion. For CSS, one robust pattern is to make the default state static and enable nonessential movement only when the user has indicated no preference for reduced motion.
Rank #3
.card {
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.card {
transition: transform 180ms ease-out;
}
.card:hover,
.card:focus-visible {
transform: translateY(-0.25rem);
}
}For a JavaScript-started animation, check the preference before starting nonessential motion:
const motionAllowed = window.matchMedia(
"(prefers-reduced-motion: no-preference)",
).matches;
if (motionAllowed) {
element.animate(
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 180, easing: "ease-out" },
);
}These patterns show how to respect a preference; they do not, by themselves, establish that an entire site conforms to WCAG. W3C WAI describes its techniques as examples, not required implementations. If a preference changes while a page is open, consider responding to that change as well. Ensure the static presentation remains understandable, and provide a pause or disable control where persistent or user-triggered movement makes one appropriate.
Keep motion smooth by measuring the actual effect
Animation cost depends on what changes and how much work the browser must do. A change can involve style recalculation, layout, paint, or composition; an API name alone does not tell you which path the browser will take or whether the result will feel smooth.
MDN Web Docs uses 60 frames per second as a commonly accepted smooth-animation reference. At that nominal rate, each frame has about 16.7 milliseconds for scripts, style calculation, any needed layout, and repaint. These are reference figures, not a benchmark of your site, a universal threshold, or a promise that every device will achieve that rate. Performance can vary with the animated property, the number of simultaneous effects, the page, the browser, and the device.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchRank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
- Keep the effect small enough to serve the interaction rather than adding motion for its own sake.
- Test the animation on representative target devices and browsers, including slower hardware where relevant.
- Profile the actual interaction if it stutters; changing from CSS to JavaScript is not automatically a fix.
- Check both pointer and keyboard interaction states, including whether focus remains visible while motion occurs.
Troubleshoot common animation problems
The transition does not run
Check that the transition is declared on the element’s base rule and that an interaction actually changes one of the properties named in the transition. A transition will not interpolate between two different values if the property does not change or is not one the browser can meaningfully interpolate.
The animation plays only once or does not retain its final style
For keyframes, check the animation name and the element’s animation declaration. A finite animation runs once unless repetition is configured. If the element should keep the final keyframe after playback, choose an appropriate fill mode such as forwards or both; otherwise let the underlying CSS define the resting state.
The page stutters during motion
Profile the property being changed and the amount of work happening during the effect. Expensive style changes or a large number of active animations can contribute to jank. Look for unnecessary layout or paint work rather than assuming the animation mechanism is the cause.
A visitor who prefers reduced motion still sees movement
Check both animation paths: CSS declarations and any JavaScript that starts motion. A CSS media query does not prevent a separate script from calling animate(). Provide a meaningful non-animated state, and consider handling preference changes during the page session.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server, not an animation authoring tool. It can capture a rendered page for visual review, but it does not create or validate the animation itself. For a one-call capture, supply a page URL and API key:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Before capture, it can accept cookie or consent banners and remove known consent platforms, newsletter popups, and chat widgets; those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo free to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Can CSS transitions animate an element when its target changes mid-transition?
Yes. A transition can start from the current interpolated value and move toward the new target.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteDoes using CSS guarantee a faster animation than JavaScript?
No. Performance depends on the rendering work and the specific implementation; profile the effect on target devices.
Does a reduced-motion snippet by itself prove WCAG conformance?
No. It is a way to honor a motion preference, not proof that a whole site meets WCAG.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
