Responsive Email Animation

I have a new article with an example of Responsive Email Animation (responsive email design + CSS3 animation).

Goodbye GIF, hello CSS3.

Disclaimer: this is a proof of concept and hasn't been tested everywhere.

Redferret, 3 years ago

You just keep beating me to it! :)

I've given CSS3 keyframes a go on mobile. Only concern is that you need to hold your finger down to see the whole animation, since you can only do it with the "hover" selector.

Keep up the good work!

Gmail app apologist
roshodgekiss roshodgekiss, 3 years ago

Amazing work, Hugh! Really love how you're pushing the envelope here :D

Get in touch with us on Twitter:
We're also on Facebook:
Mr-Mark, 3 years ago

Hiya just wondering if you have any tips for CSS animation.

I'm trying to do a snowy background (very cheesy) for our Christmas campaign with mixed results.

• Previewing in the browser works fine.
• Thunderbird works when I put the animation inline but not in a style block
• iPhone shows images when I put then inline but no animation.
• Outlook 2011 doesn't work at all
• Apple mail, I've not got set up but from Litmus is looks like no images are loading

I've put a version of my code on codepen if anyone is interested in having a look


<!--[if gte mso 9]>
    Get a  better email client
Mr-Mark, 3 years ago

Sorry I was being slow, sorted this now.

Was sending tests from Thunderbird.  Sent it from Campaign Monitor and it works fine now :)

<!--[if gte mso 9]>
    Get a  better email client

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free