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.

.snowball{
    position:absolute;
    top:-500px;
    -webkit-animation: dropsnowball 0.5s 1.5s linear; 
}
@-webkit-keyframes dropsnowball {
  0% {-webkit-transform: translateY(0px);}  
  100% {-webkit-transform: translateY(700px);}
}  

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

.snowball2{
    position:absolute;
    top:-500px;
    -webkit-animation: showandfade 3s 2s linear; 
}
@-webkit-keyframes showandfade{
  0% {opacity:1;top:210px;}  
  90% {opacity:1;top:210px;}  
  100% {opacity:0;top:210px;}  
}

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.

.container{
  position:relative;
  -webkit-animation: shake 0.5s 2s ease; 
}
@-webkit-keyframes shake
{
  0% {-webkit-transform: translateY(0px);}  
  20% {-webkit-transform: translateY(30px);}
  40% {-webkit-transform: translateY(-20px);}
  60% {-webkit-transform: translateY(10px);}
  80% {-webkit-transform: translateY(-5px);}
  100% {-webkit-transform: translateY(0px);}
}  

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”.