Animated HTML Elements in Email
Beyond GIFs: Animate Any Element
We explored earlier how clever use of animated GIFs can bring new life into commercial messages, and provided some guidelines for optimal use. GIF files are almost universal, even within email marketing, and using the first frame and last frame of your gif is a very effective way of controlling for challenging email clients.
With CSS animation, used strategically by sophisticated email marketers, any element of your message can pop, fade, slide, flip, or bounce into the email. Bring new life to your creative by creating entrance animations HTML objects such as ‹img›, ‹h2›, ‹p›, ‹span›, and more.
Try It Yourself
To animate an object in your email, use CSS classes to select the type of animation, and use @keyframes to specify activation time, control speed, and set other relevant parameters.
In this case, the animation is "fadeInUp" and it should be specified in the page's CSS:
Use the .animated to specify the duration of the animation
.fadeInUp specifies the name of the animation.
@keyframes is used to define the states of transition.
To make sure this animation is email friendly, we recommend the following steps:
- To make sure ‹style› elements render in gmail web browser, be sure to place them in the ‹head› of your html.
- Make a duplicate copy of each style with —webkit prefix (as seen in the example above), to ensure proper rendering for iOS, Apple, Android 4.4, and Windows 8.1.
- Make a duplicate copy of your @keyframes entry with a —webkit prefix (as seen in the example above)
- Be sure to test thoroughly! It's the price you pay for cutting-edge marketing technique.
Find the Right Animation
With such a variety of animation options available, be sure to do the research and find the right one for your content. If you're just getting started, this easy-to-use tool is a great resource.
Safeguarding Your Static Design
It's always good to have a backup plan, especially when it comes to email HTML. Thanks to an array of email-client specific quirks, advanced style features such as animation will not activate for those who use the Gmail App (rather than android / ios mail apps) on their phone, or use Outlook's desktop or web-based apps (Outlook iOS however, does not have issues handling css entrances). Much like with animated GIFs, it's critical that you plan how the email will display in the absense of animation.
Having a strong look for the static rendering of your creative is important, but to make sure that CSS animation isn't interfering with css-incompatible clients, we recommend wrapping any and all related CSS inside a media query like so:
