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, 4 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, 4 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, 4 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, 4 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

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free