This is a simple technique to show a brief animation of an object or text against a blank page and having the rest of the email “fade in” after the animation ends. This is a follow on of a previous example with fade in text animation.

I got the inspiration from Apple’s MacBook website featuring a Macbook appearing over a blank page. This technique is supported by the email clients that support CSS animation – namely the iOS email clients (iPhone, iPad), Apple Mail and Samsung Mail. For other clients, the object or text will appear as static.

This technique is relatively straightforward to implement and if a significant number of your subscribers are on a capable email client, this will be a cool way to delight them.

Soccer ball intro

In our example, we use an image of a soccer ball lowering onto a shadow. Non supported clients will just see a ball without a shadow although you could swap in an image of a different soccer ball with the shadow if you prefer.

Soccer Image

Shadow Image

Lets start with the following code to make the ball drop, we stack the ball and shadow on top of each other and we give each their own animation.

The ball gets a translate and opacity transformation, which will make it appear 30 pixels above its existing position and move it 30 pixels under, which will make it overlap with the shadow. Adding a z-index allows it to appear over the shadow.

.ball{
  z-index:100;
  animation: drop 4s forwards;
  position:relative;
}
@keyframes drop{
  0%{
    opacity:0;
  }
  25%{
    opacity:0;
    transform:translateY(-30px);    
  }
  80%{
    opacity:0.9;
  }
  100%{  
    opacity:1;
    transform:translateY(30px);
  }
}

As for the shadow, we use an opacity and scale transform which makes it grow as it appears under the ball.

.ball-shadow{
  animation: shadow 4s forwards;
  position:relative;
}
@keyframes shadow{
  0%{
    opacity:0;
  }
  40%{
    opacity:0;
    transform: scale(0.8);    
  }
  100%{  opacity:1;
    transform: scale(1);    
  }
}

Hiding and showing the rest of the email

To hide the rest of the page initially we wrap them with a container and assign a class “showlater” that intially has the opacity set to 0. It is important that the container not wrap the animated content or everything will be hidden! Therefore you need at least two blocks, one above and one below the animated content.

We then assign an animation that displays the hidden content with a preset delay (5 seconds).

.showlater{
  opacity:0;
  animation: showlater 0.8s 5s forwards;
}
@keyframes showlater{
  from{
   opacity:0;
  }
  to{
   opacity:1;
  }
}

Fallback

Since not all clients support CSS animations, we need to take the less capable clients into account. Luckily in this case all we need is to hide the shadow (we can leave it in as well).

The following code initially hides the shadow from all email clients.

<!--[if !mso]><!-->
<div class="ball-shadow" style="display:none;max-height:0px;overflow:hidden;"><img src="ball-shadow.png" width="250" height="60"></div>
<!--<![endif]-->

We then place the following code within a-webkit-min-device-pixel-ratio media query that only clients that support CSS animations will process as explained in this article.

@media screen and (-webkit-min-device-pixel-ratio:0){
  .ball-shadow{
    animation: shadow 4s forwards;
    display:block!important;
    max-height:none!important;
    position:relative;
  }
  .ball{
    z-index:100;
    animation: drop 4s forwards;
    position:relative;
  }
  .showlater{
    opacity:0;
    animation: showlater 0.8s 5s forwards;
  }
}

Live Example

See the full example on CodePen.

Text Animation

You can also apply this technique to text as well.

See the full example on CodePen.

Just like the previous animation, for clients that don’t support support animations, they see the static text.