Kickstart your Click-Throughs with CSS3 Animation

Geoff Phillips | 2014-11-04T13:55:24+00:00 | email on acid logo

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.

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?

Submit a Comment