Being text-based, they are quick to load and play smoothly on most modern devices. Animated GIFs tend to be on the heavier side when it comes to file weights, and can be slow to load and display on mobile devices. As more and more emails are read on mobile, email marketers need to contend with subscribers using limited bandwidth and small data plans. One of the biggest benefits of CSS animations is that they create faster loading emails compared to using an animated GIF. Source: Litmus’ 2018 State of Email Survey of 3,000 marketing professionals.Īlthough animated GIFs have wider support, CSS animations have a number of benefits when used properly. According to our 2018 State of Email Survey, 78% of brands use animated GIFs in their campaigns, whereas only 30% use CSS animations. Since email clients never really supported the use of Flash or Silverlight in the inbox, email marketers were left using animated GIFs if they wanted movement in their campaigns. For a long time, animation on the web was created either in a proprietary tool like Adobe Flash or Microsoft Silverlight or as an animated GIF-an image format that allows for frame-based animations. Why use CSS animations?ĬSS animations have been around for years, but are only recently seeing wider use both in the web and email industries.
#Simple css animation examples code#
In this guide, we’ll explore the pros and cons of using CSS animations in email, as well as the code that powers CSS animations. Perhaps more importantly, they can create more interactive and engaging campaigns, too. Using a handful of CSS properties, email marketers can manipulate the HTML of their campaigns and create a similar sense of motion as when using animated GIFs.
While motion in email has traditionally been achieved through animated GIFs, CSS animations can sometimes be a more effective technique.ĬSS animations are animations that are built using code-specifically HTML and CSS. Motion helps draw the eye to specific content and suck the user into that content. One of the more common ways to enhance emails is by adding animation and motion to a campaign. From design to dynamic content and promotions to personalization, marketers are testing out different techniques to pique subscriber interest and increase engagement.
Enterprise Plan Boost collaboration and drive resultsĮmail marketers and designers are constantly looking for ways to set their campaigns apart in the inbox.
#Simple css animation examples plus#
0 kommentar(er)
