I was mulling around CodePen and found this super cool CSS animation featuring the Star Wars AT-AT walker of The Empire Strikes Back fame written by r4ms3s. I thought to myself, hmm I wonder if it will work in email?

Surprisingly, it does! Well for the webkit based email clients anyways (iOS, Android 4.4 Mail, Apple Mail, Outlook for iOS).

It all boils down to lots and lots of CSS shapes, CSS transforms and CSS animations. I learned quite a bit, especially on how to create triangles from CSS border widths.

Making it work for email.

For the most part the CSS just works in Webkit email clients, though I did make some changes:

• Added a container div with position relative and overflow hidden to bound the animation.
  
  
• Moved the initial position of the space ships outside of the view so it doesn’t crowd a small screen
  
  
• Added a fallback for non-Webkit clients.
  
  

Experiment

There are so many cool “pure CSS” examples on the net, particularly on CodePen, its fun to test to see if they will “RIE” – Render in Email. CodePen and Putsmail is your friend here.

If you come across any interesting ones that works in email, let me know!