CSS animations in email

seasonal animated overlays

When I first started working on emails, coming from web design into email I was keen to experiment with the use of animation within email. The first email to use a css overlay was ocean themed, therefore I animated bubbles floating up to the top of the screen over the top of the email, pure css no background images or jQuery. Since then I adapted and reused the code to create falling snow, leaves and blossom to represent new season launches.

CSS falling blossom

This springtime collection was centered around the floral dresses. To make the email special to the other BAU emails I added a background to extend the width and create a full screen effect. I also incorporated CSS falling blossom to tie in with the Spring theme of the collection, increase email attention span and add something slightly different.

Responsive view

CSS floating bubbles

This new toy collection required a fun email to get customers excited about the new range. These toys all had a vector characters to represent the different animals and the animated bubbles floating up the page gave the email an extra special feature. Along with the css animation this email also used subtle animated gifs to show the characters blinking and smiling to bring the email to life.

Responsive view