![]() ![]() ![]() Your subscriber might get tired of waiting for a GIF that loads slowly and gets stuck on the first frame. That means that CSS animations will load faster than GIFs.Īs any email marketer will tell you, subscribers don’t have a long attention span. ![]() Why do CSS animations load faster than GIFs?ĬSS animations are relatively lightweight and small in terms of file size compared to GIFs. Allow you to inject some creativity into your email.We briefly compared CSS animations and GIFs above, but let’s dive into the benefits in more detail:ĬSS animations are great for emails because they: What are some pros of using CSS animations in emails? Below, we’ll unpack some of the pros and cons about CSS animations listed above and show you how to harness their power. This guide focuses on CSS animations, but you can check out this article to learn more about using GIFs in emails. Look very good on high-quality mobile devicesĪs you can see, both GIFs and CSS animations have their pros and cons. Tend to lag and lack the smooth look of CSS animations as the images go frame by frame Require more knowledge to create and troubleshoot Let’s look at a comparison between the two types of animation: Animated GIFs While cool animated GIFs have long been a cornerstone of email design, CSS animations can step up and fill in the gaps where GIFs lag behind. What’s the difference between CSS animations and animated GIFs? If you’re not sure why this is important, read on! We’ll dive into that in the section below. For email developers, that means we can use it as an enhancement for email clients that support CSS.ĬSS animations also eliminate the need to generate animated GIFs. In other words, CSS animations eliminate the need to use an external scripting language such as JavaScript or Flash, which are not supported in email. This animation property allows us to animate individual HTML elements like img, span, and div by using only the CSS and HTML that’s already part of an HTML email template. But what exactly are CSS animations?ĬSS animations refer to the animation property of Cascading Style Sheets (CSS). You can use CSS animations to create various animations – from spinning icons to subtle hover animations on a Call to Action (CTA) button. Then we’ll wrap up with some code tutorials. Let’s start from the basics, like pros and cons, support, and some CSS animation examples in emails. We’ve talked about using GIF animations in email marketing campaigns elsewhere, so we’ll focus on CSS animations in this article. After all, you can choose from so many different options, like animated GIFs or CSS animations. Now it’s your move on how to implement animated emails. $("#cf7_controls").Your team wants the next email campaign you code to stand out from the crowd, and they’ve asked you for an upgrade on simple static images. This is very similar to the others – just layout the images on top of each other, set them all to be transparent, then when the controls are clicked change that one to opaque. This technique isn't limited to just fades, you can animate almost every property. Total animation-duration is of course t=(a+b)*n Thanks to Pafson's comment, this is finally working as expected! He proposes the following algorithm to determine the percentages and timings: This time I've created an animation that goes from 0 to 1 opacity, then staggered the animations so only one is visible at once. Staggering the animations can result in a multiple image fader. Set the animations number of iterations to infinite.Use CSS keyframes to define two states, one with top image transparent, one with it opaque.Start with two images absolutely positioned on top of each other.As we are looking forward though, we'll use CSS keyframes. You could implement this by using Javascript to toggle classes with a delay - that would allow older browsers to still have the images change. Demo 3 - One image to another with a timer (CSS animations) Plan Have a look at the multiple image demo to see how to extend this idea to more than two images. $("#cf2 img.top").toggleClass("transparent") Note that the browser is smart enough to realise that it can animate to the new properties, I didn't have to set them in javascript (thought that works too). webkit-transition: opacity 1s ease-in-out I've added a class with the opacity value. Again, with no CSS enabled, you just get two images. ![]()
0 Comments
Leave a Reply. |