Adding subtle text animations in your email hero area can add some sophistication into your design. Although not every email client supports CSS animations, here is a simple technique you can use to display a slow drop down and fade in effect in your email design.

The nice part about this technique is that you don’t need to have a fallback design, clients that don’t support animation just display the text.

This technique is that it also contains a fix for a common glitch that iOS Mail sometimes exhibit where the animations appear jittery.

Fade In

We start with fade-in, the technique is pretty straightforward. Wrap a div around the text that you want to animate and add a class (ie “line”). Then in the CSS style block add an animation that goes from opacity:0 to opacity:1.

.line{
  opacity:0;
  display:block;
  animation: slidein 1s ease-out forwards;
}
@keyframes slidein{
  0%{ opacity:0; }
  100%{ opacity:1; }
}

Fade In and Drop Down

Then we add CSS translate transforms that move the text down while the text appears. We make the initial position 25 pixels higher so that the text rests at its original position when it ends.

.line{
  opacity:0;
  display:block;
  animation: slidein 1s ease-out forwards;
}
@keyframes slidein{
  0%{ opacity:0; transform:translateY(-25px); }
  100%{ opacity:1; transform:translateY(0px); }
}

iOS Animation Glitch Fix

One of the issues with iOS Mail is that sometimes animations don’t run smoothly when there are multiple apps running in the background. There is a hack where we increase the duration but finish the animation earlier in the sequence. This article explains the nitty gritty of the iOS glitch.

In this example we increase the duration from 1s to 2s but complete the animation at the 40% mark (technically it should be 50% but I found 40% to work better). Make sure to test your designs to ensure it works as you envisioned!

.line{
  opacity:0;
  display:block;
  animation: slidein 2s ease-out forwards;
}
@keyframes slidein{
  0%{ opacity:0; transform:translateY(-25px); }
  40%, 100%{ opacity:1; transform:translateY(0px); }
}

Completing the Example

We complete the example by adding animation-delay to allow multiple lines to begin one after another and we wrap our animation code within a -webkit-device-pixel-ratio media query. This media query ensures that only Webkit and therefore animation capable email clients execute the code. The clients include iOS Mail, Apple Mail, Samsung Mail and Outlook for Mac.

Normally we wouldn’t need to hide our animation since clients that don’t support animations just ignore the statement but for this example, I’m setting the opacity of the text to 0 initially so I need to ensure clients that don’t support animations unintentionally hide the text.

What about -webkit prefixes for animations?

I’ve found that -webkit prefixes are no longer required for animations in email. I wrote my thoughts in this article.

See the Pen Fade In CSS Animations For Email by FreshInbox (@freshinbox) on CodePen.