Definition
Email animation includes three main techniques: animated GIFs, CSS animations, and video embeds. Animated GIFs are the most widely supported method, working in every email client including Gmail and Outlook. However, GIFs have a limited color palette (256 colors), large file sizes at high resolution, and lack playback controls. A GIF that plays for 15 seconds at 720px wide can easily exceed 3MB, which will be blocked by Gmail's 25MB total email size limit and frustrate mobile users on limited data plans.
CSS animations rely on @keyframes rules and work only in WebKit-based clients such as Apple Mail, iOS Mail, and Samsung Email. Gmail and Outlook ignore CSS animations entirely. Common CSS animation use cases include pulsing buttons, scrolling text, and fade-in effects. Video embeds use the HTML5 <video> tag but are stripped by most email clients, replaced with a static poster image. Only clients like Apple Mail and Thunderbird play video inline; others show the poster image or nothing at all.
Best Practices
Set the first frame of any animated GIF to the most important visual content. Email clients often stop GIF playback after one loop or when the message is forwarded (Apple Mail loops once; Gmail shows only the first frame in certain views). Use Photoshop or tools like Ezgif to set the first frame as a static fallback that communicates the core message.
Optimize GIF file size ruthlessly. Limit the animation to 2 to 5 seconds with no more than 10 to 15 frames. Use lossy GIF compression (lossy level 2 to 20) and reduce color depth to 64 or 128 colors. Keep GIF dimensions under 600px wide and scale in HTML if needed. Target a file size under 500KB per GIF; a total email with multiple GIFs should stay under 2MB.
Use CSS animations only as progressive enhancement. Write the email so it communicates the same message without animation. In supporting clients, add @keyframes and animation properties in the <style> block. In non-supporting clients, the element remains static and fully readable. Test that the static state is acceptable before layering on motion.
For video content, embed a static poster image (first frame or custom thumbnail) linked to the hosted video URL. Wrap the <video> tag or a clickable image in conditional code so that Apple Mail plays inline while other clients open the video in a browser. Use <img src="poster.jpg" href="https://youtube.com/watch?v=..." /> as the universal baseline.
Related Glossary Terms
CSS in Email
The subset of CSS properties supported across email clients, dominated by inline styles and constrained by Gmail and Outlook limitations.
Email CTA
The call-to-action element in an email that drives the primary conversion, designed through button copy, placement, color, and urgency tactics.
Email Fonts
Typography in email, including web-safe fallback stacks, custom font loading, and readability considerations across devices.
Email Footer
An email footer is the bottom section of an email that contains legal requirements, unsubscribe mechanisms, and company information.
Email Gmail CSS
The subset of CSS supported by Gmail, which strips most `<style>` block rules and requires inline CSS for reliable rendering across web and mobile.
Email Interactive
Email elements that respond to user action using CSS pseudo-classes, checkbox hacks, and limited scripting alternatives.
Frequently Asked Questions
Yes. Gmail displays animated GIFs in the inbox preview and open state. However, Gmail may stop the animation after a single loop in some views. The first frame must convey the message independently.
No. APNG is not supported in Gmail, Outlook, or most other email clients. Animated GIF is the only universally safe animated image format for email today.
500KB per GIF and 2MB total for all images. Gmail truncates emails at 102KB of HTML and may clip or block emails exceeding 25MB total. Large GIFs also increase load time and data usage for mobile recipients.
Define the starting state as the static CSS inlined on the element. Place the animated properties inside a `@keyframes` rule in the `