Member Avatar for ari$av3s

What do you guys think is the best method for creating a short, looping, frame-by-frame NON-FLASH animated element? By best, I mean, most cross-browser compatible and least resource hogging. I see a few different JS solutions but was curious to hear about previous experiences.

  • 4 Contributors
  • 5 Replies
  • 231 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by markjanyson

Dani AI

Generated

Quick summary for this thread: for a short, looping frame-by-frame animation the best balance of cross-browser compatibility and low CPU is a single sprite sheet driven by a CSS @keyframes animation that uses the steps() timing function and animates the sprite with a transform (not repeatedly changing layout-affecting properties). That approach is CSS-only, easy to pause/resume, and—because it uses compositable properties—lets the browser keep work on the GPU where possible. animation-timing-function: steps() · High-performance CSS animations guide. (developer.mozilla.org)

Minimal pattern (one horizontal strip, clipped viewport). Adjust steps(...), frame width, and translate distance to match your sheet:

/* viewport = single frame */
.sprite {
  width: 80px; height: 80px; overflow: hidden;
}

/* strip = entire horizontal sprite image */
.sprite .strip {
  display: block;
  animation: play 1s steps(10) infinite;
  will-change: transform; /* hint browser, remove if not needed */
}

@keyframes play { 100% { transform: translateX(-800px); } }

Use steps(frameCount) and set the final translate to frameWidth * frameCount. See @keyframes for details. (developer.mozilla.org)

When to pick something else: use canvas + requestAnimationFrame() if you need per-frame logic, many simultaneous sprites, collision detection, or variable frame timing (games, complex effects). For programmatic control of CSS-like animations, the Web Animations API or a timeline library (GSAP) gives precise control and good performance. (developer.mozilla.org)

Practical tips: keep the sprite file small (compress, consider animated WebP/APNG where appropriate), reduce frame count, test on actual mobile devices, and prefer transform/opacity to avoid layout paint churn. If you liked ’s jQuery idea, use it to toggle classes or control playback; ’s Spritely was useful historically, but modern CSS/Canvas/WAAPI techniques are lighter and more widely supported. Check animated-image support before shipping (APNG/WebP compatibility varies by platform). (caniuse.com)

Recommended Answers

All 5 Replies

Member Avatar for ari$av3s

Nice list. I am going to bookmark it. I want to try the robot tutorial, lol.

I stumbled upon this yesterday, it looks perfect for what I am trying to accomplish, & if you do a lot of animation, you may like it too.

http://spritely.net/

Member Avatar for pixelsoul

Thanks! I'll check it out.

Member Avatar for jose.fotografia.9

http://wideo.co is an excellent free tool to create animation videos. You can upload your videos to youtube

Member Avatar for markjanyson

, Thanks for this useful threat. I check it

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.