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 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteTo animate an image in HTML, put it in an <img> element and use CSS keyframes for a repeating effect such as movement or fading. Use JavaScript’s Web Animations API when code needs to start, pause, reverse, or otherwise control playback. For animation already rendered frame by frame, use an animated image file; for motion inside vector artwork, use inline SVG.
The right choice depends on whether you want to animate the image as a whole, control it interactively, or ship a pre-rendered sequence. The examples below show each approach and how to account for accessibility, performance, and common browser issues.
Choose the right way to animate an image
| Method | Use it when | What to know |
|---|---|---|
| CSS keyframes | You want a fixed or repeating effect on the whole image, such as a fade, float, scale, or rotation. | CSS describes the effect and its timing. It is usually the simplest option for decorative movement. |
| Web Animations API | JavaScript must start, stop, pause, reverse, or otherwise manage an animation. | Element.animate() returns an Animation object you can control. |
| Animated image file | You have a pre-rendered frame sequence that should play as one image resource. | The animation is part of the asset, not a set of DOM-controlled states. Format support varies among browsers. |
| Inline SVG | You need to animate vector artwork or individual elements inside it. | Inline SVG exposes its elements. An SVG loaded through <img> is treated as an image, not an interactive document. |
The HTML <img> element displays an image resource; it does not itself define an animation. CSS, JavaScript, the file format, or SVG supplies the motion. See MDN’s guide to the image embed element.
Animate an image with CSS keyframes
For a straightforward effect, give the image a class, assign it an animation, and define the animation’s states with @keyframes. This complete example gently moves an image up and down:
Recommended Free Tools
#1 Best Overall
<img class="float" src="kite.png" alt="A kite floating in the sky">
<style>
.float {
animation: float 2s ease-in-out infinite alternate;
}
@keyframes float {
from { transform: translateY(0); }
to { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
.float {
animation: none;
}
}
</style>Replace kite.png with a valid image URL or path in your project. The alt text describes the image’s meaning; it does not describe the animation unless that motion itself conveys relevant information. The CSS animation guide explains keyframes and CSS animations.
Change the effect and timing
The from and to blocks define the start and end states. You can use properties such as opacity for a fade or transform for movement, scaling, and rotation. For instance, changing translateY(-12px) to rotate(8deg) makes the image tilt instead of move upward.
In the shorthand animation: float 2s ease-in-out infinite alternate;, the values mean animation name, duration, timing function, iteration count, and direction. The animation property also supports delay, fill mode, play state, and timeline-related behavior; consult the animation property reference for the syntax and interactions.
Use a finite iteration count instead of infinite when the effect should stop, and choose a duration that keeps movement purposeful rather than distracting. An infinite animation is appropriate only when the continuing motion serves a clear purpose and users have a way to reduce or stop it where needed.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Start or control motion with JavaScript
Use the Web Animations API when an event or application state should trigger motion. This example starts a one-time movement when a user presses a button:
<img id="photo" src="photo.jpg" alt="A mountain lake">
<button id="move" type="button">Animate</button>
<script>
document.querySelector("#move").addEventListener("click", () => {
document.querySelector("#photo").animate(
[
{ transform: "translateX(0)" },
{ transform: "translateX(80px)" }
],
{ duration: 600, easing: "ease-out", fill: "forwards" }
);
});
</script>Element.animate() creates and starts an animation on the selected element, returning an Animation object. The example uses fill: "forwards" so the element retains the final keyframe after the active interval. If you need to manage playback, keep a reference to the returned object:
const image = document.querySelector("#photo");
const animation = image.animate(
[{ opacity: 0.4 }, { opacity: 1 }],
{ duration: 500, fill: "forwards" }
);
// Later, in response to an appropriate control:
animation.pause();
animation.play();
animation.reverse();Use a user-triggered control when the effect is an interaction rather than decoration. For a fixed effect that always runs, CSS is generally simpler. The Web Animations API guide and Element.animate() reference cover browser playback controls.
Use an animated image file for a pre-rendered sequence
If your frames have already been created, embed the file as the image source:
Rank #3
<img src="animation.webp" alt="A small animated preview of the product">Common animated formats include GIF, APNG, AVIF, and WebP, according to MDN’s image format overview. The formats have different characteristics: APNG is suitable for lossless animation, GIF for simple animations, and WebP supports both still and animated images. There is no universally best format; consider file size, image quality, browser compatibility for your audience, and whether you need to control individual animation states.
With this method, the frames and their timing are part of the file. CSS can still style the <img> element, but it does not give you DOM-level control over the sequence’s individual frames. If you require an interactive timeline or must coordinate motion with page state, use CSS, JavaScript, or SVG instead.
Animate vector artwork with inline SVG
SVG is useful when the parts of an illustration need to move independently. You can place SVG markup directly in the document and animate an SVG attribute with elements such as <animate>. For example, this circle changes its horizontal position:
<svg viewBox="0 0 120 40" role="img" aria-label="A circle moving across a line">
<circle cx="10" cy="20" r="8">
<animate attributeName="cx" from="10" to="110" dur="2s" repeatCount="indefinite" />
</circle>
</svg>SVG animation targets SVG elements or attributes, so it is not the same as moving a raster <img>. See MDN’s documentation for the SVG animate element.
Rank #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
An external SVG loaded with <img src="art.svg"> is treated as an image; page scripts cannot interact with its internal elements as if they were part of the document. Use inline SVG when the page needs to target its vector elements. The SVG image element reference describes how SVG embeds image resources.
Make motion accessible and efficient
Some people experience discomfort from motion, particularly large scaling or panning effects. Honor the operating-system preference represented by prefers-reduced-motion for non-essential effects, as in the CSS example. Depending on the purpose of the motion, reducing it to a subtle transition may be more useful than removing it entirely. MDN explains the preference in its reduced-motion media feature reference and accessibility media-query guide.
- Avoid flashing effects and continuous attention-grabbing movement unless motion conveys necessary information.
- For ongoing motion, consider a visible way for users to pause or disable it.
- Use a small number of purposeful animations. Larger animations and a higher number of simultaneous animations can require more processing power.
- Prefer CSS for essential DOM animation where it fits; use the Web Animations API when JavaScript needs to manage playback.
- Check the result on the devices and browsers your site supports, including the reduced-motion state.
MDN’s CSS performance optimization guide provides further guidance on keeping effects efficient.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common image-animation problems
The image does not move
- Check that the element has the class or selector targeted by the animation rule and that the CSS is loaded.
- Confirm that the animation name matches the name after
@keyframes. - For JavaScript, verify that the selector returns an element and that the click handler runs. Check the browser console for errors.
- Remember that the reduced-motion rule intentionally sets
animation: nonewhen the user preference is active.
The animation ends in the wrong state
CSS animation fill behavior and Web Animations API fill behavior determine how keyframes apply outside the active interval. For the API example, fill: "forwards" keeps the final state applied. For CSS, select an appropriate fill mode in the animation shorthand or related property; use the property reference to check valid values.
Free tools Windows power users keep installed
One-click scans. No signup required.
The animated file appears still
- Make sure the source points to the intended animated asset rather than a still-image export.
- Verify that the file is being served successfully and is not being replaced by a cached or differently named file.
- Check the format in the browsers you support; available image formats can differ among user agents.
The external SVG does not respond to page scripts
That is expected when it is loaded as an image with <img>. Put the SVG markup inline when page code or animation must target its internal elements.
The effect stutters or feels slow
Reduce the number of simultaneous effects and simplify large or complex motion. Test on target devices rather than assuming an effect that looks smooth on a development computer will perform the same everywhere. MDN’s CSS performance guidance discusses animation cost.
Or skip the browser setup
If you need a screenshot of the page containing your animated image, rather than an animation file or video, ScreenshotNeo can capture the rendered page with one request. A screenshot is a still image; it does not create or export the animation itself. For example, this request captures the page at Stripe:
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 documentation for request options. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; 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 screenshot tools for AI agents, including Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsLearn about ScreenshotNeo or sign up for 1,000 free screenshots a month with no card.
Frequently Asked Questions
Can I animate an image in HTML without CSS or JavaScript?
Yes. An animated image format such as GIF, APNG, or WebP can play its pre-rendered frames when embedded in an <img> element.
Can I animate just part of a photo with CSS?
CSS applied to an <img> transforms or changes the image element as a whole. To animate independently addressable artwork, use inline SVG or separate page elements.
Does the HTML <img> tag have an animation attribute?
No. The element embeds the image resource; motion comes from CSS, JavaScript, an animated file format, or SVG.
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.
