{"id":9951,"date":"2022-06-08T19:25:00","date_gmt":"2022-06-08T13:55:00","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=9951"},"modified":"2024-05-23T17:18:07","modified_gmt":"2024-05-23T11:48:07","slug":"css-animation-email","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/css-animation-email\/","title":{"rendered":"Email Design Trends: Adding CSS Animation in Email"},"content":{"rendered":"\n

[This post was originally published on 9th Feb 2018. It has been updated on 8th June 2022.]<\/p>\n\n\n\n

Could our ancestors have ever thought that one day, moving photographs would be for real? While moving photographs are not possible in print media, digital media has already succeeded in adding value to static elements and images by animating them. All thanks to HTML animation codes and CSS, plain text emails have got a makeover and now email subscribers can enjoy different HTML email templates<\/a>.<\/p>\n

Types of Possible Email Animations<\/h2>\n

1. Animated GIFs<\/h3>\n

Traditionally, any email client that supported embedded images would support animated GIFs (except for Outlook and Lotus Notes). Email designers began diverting their attention to using animated GIFs in situations where multiple images needed to be displayed or just to include some animation in a plain email. In fact, back in 2014, Dell witnessed 109% lift in their revenue by sending a GIF-centric email<\/a>.<\/p>\n

\"\"<\/a><\/h3>\n

2. Cinemagraphs<\/h3>\n

Taking animated GIFs a step ahead, cinemagraphs have a static foreground with a single element moving \/ animating in the background. This creates a cinematic effect and hence the name \u201ccinemagraph\u201d.<\/p>\n

3. Embedded Videos<\/h3>\n

As technology advanced, in the late 2000\u2019s email designers started to experiment with including videos that will play right in their inbox. In 2009, the push toward responsive emails<\/a> began and most native email clients started supporting video playback in the inbox. After experiencing a lull when Apple dropped support for video playback in iOS 8, embedded video in emails is making a strong comeback with increasing devices supporting it.<\/p>\n

Moreover, as per Reuters<\/a>, more than 84 percent of communication in 2018 will be visual, so expect more emails featuring embedded videos.<\/p>\n

\"Rich<\/a>

Click on the above banner to know more about different rich media in emails<\/p><\/div>\n

4. CSS Animations<\/h3>\n

HTML CSS animation is the latest fad that is gripping the email design domain. Earlier, gimmicks such as flip, hover, illumination, free fall et.c that were only possible in web pages using JavaScript and Flash are now easily replicated for emails using CSS wrapped around an HTML structure.<\/p>\n

5. What is CSS animations and How can you add it to your emails?<\/h2>\n

HTML CSS animation in emails revolves around changing the CSS properties at regular intervals that are specified by keyframes. There are two components to create a CSS animation:<\/p>\n

@keyframe<\/strong>: This specifies what styles the element will inherit at specified time intervals. Keyframes are not element specific and can be inherited by any elements that are specified using animation tag. This is placed in the <head> of CSS animation email.<\/p>\n

\"\"<\/a><\/p>\n

Animation<\/strong>: This specifies what keyframes are to be included in the specified element. This is placed in the <body> of an email. There are two different CSS properties that can be used.<\/p>\n

    \n
  1. -animation- CSS property<\/strong>
    The animation property is a shorthand property for eight of the animation properties:\n

    \u00a0<\/p>\n