Animated gifs in email are popular, so how do you let the recipient know that the cool CSS effect you’re using is not just another gif? Simple… animate the entire email!

I received a few compliments on the newsletter I sent earlier last month (the second anniversary of the FreshInbox blog –yay!) and I thought I’d explain a few concepts behind it on this post. It starts with snow lightly falling across an idyllic image of a house and suddenly… BAM! A snowball lands right in front of the email and causes the email to “shake”.

As usual, only email clients that support animations can view this effect.

You can view the email here.

How its done

Dropping the snowball

First, create two snowballs. One round one, and another on the ground:

Have both snowballs initially hidden by positioning them off the body of the email. Then after a brief delay, dropping the first one from the top. Note since the initial position of the snowball is -500px, a translateY of 700px will place it at 200px vertically from the top.

Once the snowball drops, switch to the second snowball and then let it fade away.

Shaking the email.

This is the fun part, and its quite easy. You wrap the email with a container div and set it to position: relative, then you just use translate transforms to “shake” it.

Gimmick?

Now this is not something you want to use frequently as it can get tiring really quick — but for the right campaign, it can certainly add to the user “experience”.