CSS Animation

Kickstart your Click-Throughs with CSS3 Animation


Standing out from the crowd is a constant challenge in email marketing. Templates all begin to look the same, and your subscribers have seen a thousand CTAs by now. Today we have a new technique that could really “shake up” your email strategy!

Make your CTA dance!

With a little bit of CSS3 code, you can make your CTA move. There are many options for what kind of movement you can apply to your CTA, but we chose to use a “tada” animation. I got the idea for this (and the code) from the website of the esteemed Daniel Eden. Check it out, because he has a lot of other options for how you might want to animate elements in your email campaigns. Want the code we used for this animation? Just click on the CTA below!

 

 

How it works.

You’ll need to add a class to your CTA to tie the animation to. For this example, I included two classes. If you use class=”animated”, the animation will only last for a short time (here it is set for 1 second, but this is adjustable). If you use class=”animated_infinite” the animation will play indefinitely. Here is our example code:

<div class="tada animated_infinite">
Put your button here.
</div>

Then you’ll want to add the CSS3 code to your style section to create the animation. This code is a bit more involved, but there are a lot of tools that can generate it for you.

<style type="text/css">
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated_infinite {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
</style>

That’s all you need to get your button dancing! Get out there and try something new in your next campaign.

A case study.

CSS 3 graphic We used one of our mailings to test how effective this button is at increasing the click-through rate for a campaign. We used an A/B test so that we could send the same email to our entire list, with a random subset of subscribers getting the new button. This campaign was offering our subscribers a free downloadable SPAM Traps guide. In this test, we found that the dancing CTA had a 4% higher click-through rate than the “control” CTA. We’ll have to do some more testing to see if that click-through rate is consistent, but it’s certainly a good sign!

Where is CSS3 Animation Supported?

In our testing, we found that CSS3 animation was supported in the following clients.

  • Apple Mail 5
  • Apple Mail 6
  • Android 2.3
  • Android 4
  • iOS 6
  • iOS 7
  • Thunderbird

This may seem like a short list, but the fact that iOS is supported is HUGE. It also doesn’t hurt anything in unsupported clients, so just think of it as tasty gravy for the tech-savvy viewers. If you’ve seen another client where the animation works, please let us know!

What do YOU want to do with CSS3 animation in email?

This blog was mostly about making a CTA dance, because the CTA is often the most important part of an email. Using CSS3 animation, you could produce any number of different effects. What would you like to add to YOUR emails?

15 thoughts on “Kickstart your Click-Throughs with CSS3 Animation”

  1. Has there been any studies done on how many people delete emails with animations in. As I delete every single one as they are very annoying in my inbox.

    I think a better solution is to not make animations go on an infinite loop, and instead only run them each time the email is opened. That way I wouldn’t need to delete them from my inbox.

  2. Pretty cool!

    @artwork79 I can’t read content if there’s something vigorously moving but I think that can be mitigated by spacing out the animation using the keyframes so its only animating every few seconds or as you said not making it loop by changhing these variables:

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

  3. I kind of feel like there was a reason “text-decoration: blink;” became deprecated. Unfortunately this seems like it’s a bit more difficult to deprecate, though just as annoying… if not more. I’m sure it has it’s appropriate time and place, but I’m also sure it’ll be used outside of those parameters for marketers hoping to pull in a few extra opens on a tired layout, undesirable emails. I can’t see anything but the button, I have no idea what this article even says, all I can see is that button. I’d unsubscribe immediately. Normally I just delete, but that would push me off your list.

  4. There’s an error in this. the div tage should be

    Put your button here.

    You missed the ‘animated’ class out which causes the animation to work incorrectly

  5. Love it. Doesn’t bother me to have animations in my inbox. Only plays when the message is in preview pane so having a loop doesn’t hurt anything. This particular animation is a little strong for my tastes but it does grab a huge amount of my attention.

  6. Peter,
    Actually you can use this code two ways. You can do a limited time animation (.animated) or you can have it animate forever (.animated_infinite). For this example, we chose to have the animation play endlessly.

  7. @Geoff

    Hi Geoff, my apologies, you are correct. The cause of my issue actually came from having my image left aligned which seemed to anchor the animation strangely. Centering the image solved the problem.

  8. Kill it. Kill it with fire, hate and acid.

    This poison fuelled abortion should never be allowed to inherit the internet… correction, the universe… as it will only encourage the users of Powerpoint “tyre screeches” or editors using Comic Sans as a “light and fun font” to drop it into every single email-spam they send, in the delusion they are ‘increasing their social metrix’ or ‘introducing innovative solutions to customer engagement’.

    Geoff Phillips, you made a bad thing. And you should feel bad.

  9. I have seen a few comments on here expressing concern over this particular trick being too annoying and thus ineffective. When testing this, though, we did see an increase in clicks. I would not advocate that it be used in every campaign, as that would certainly be annoying. You might also want a less vigorous animation, or for it to play only once.

    Please remember that I am trying to test the limits of what one can do in email, not necessarily what one should do. I’ll leave that up to the marketers.

  10. It’s great seeing the boundaries of email pushed constantly. And this is a brill example here. CSS3 animations could be put to better use though – maybe using the CSS3 animations on hover states, to make the CTAs more interactive. Of course it all depends on the look and feel of your email and if your email calls for an all singing and dancing (literally) CTA… then more power to you.

  11. I gave this a whirl in a test and I can’t seem to get it to animate online in gmail/yahoo, or through new android or iphone phones–either through the native mail app nor the gmail app. Is there something more to getting it to work than what’s listed? (When I put it in my ESP, it animates like crazy while I preview it.)

  12. @Robert,

    I think you are missing the point, as Geoff points out.

    Now in some cases, it is beneficial to annoy folks into taking some action, but you don’t have to be quite this in your face. A subtle animated gradient with just enough motion to grab the eye which runs every 4 seconds, might be a good balance.

    Its also the sort of thing you might do with as .animated:hover or .animated:active as a way to indicated that something has happened. Done well, that would add fit and finish to your campaigns that would reap benefits over time.

    You can also

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies