CSS3 Keyframe Animation Basics

  • follow us in feedly
Published March 3, 2013 by Brad Knutson
CSS3 Keyframe

You may have heard of CSS3 animations from keyframe syntax, or you may not have, but it’s becoming increasing popular with today’s web designers. You have probably come across a few examples of these before without even realizing it.

If you don’t think you’ve ever heard of keyframe animations, and you don’t think you’ve ever seen one before, try mousing over my logo in the upper left corner of the page. See how it wiggles? This is done with CSS3 keyframe animation.

Keyframe syntax allows you to perform multiple CSS3 animations, transitions and translations based on a timing function.

Browser Support

Note: Only Internet Explorer 10+ supported.

Declaration

@-webkit-keyframes animation-name {
	0%   { property: value; }
	100% { property: value; }
}
@-moz-keyframes animation-name {
  	0%   { property: value; }
  	100% { property: value; }
}
@-o-keyframes animation-name {
  	0%   { property: value; }
  	100% { property: value; }
}
@keyframes animation-name {
 	0%   { property: value; }
  	100% { property: value; }
}

Usage

.class {
  -webkit-animation: animation-name 5s infinite; /* Safari 4+ */
  -moz-animation:    animation-name 5s infinite; /* Fx 5+ */
  -o-animation:      animation-name 5s infinite; /* Opera 12+ */
  animation:         animation-name 5s infinite; /* IE 10+ */
}

This post goes over very basic animations. A post about advanced keyframe animations is for another day. Let’s start with the very animation I use on my logo on this site.

Rotate Animation

CSS

@-webkit-keyframes rotate {
	0% { -webkit-transform: rotate(0deg); }
	17% { -webkit-transform: rotate(10deg); }
	34% { -webkit-transform: rotate(-10deg); }
	51% { -webkit-transform: rotate(6deg); }
	68% { -webkit-transform: rotate(-6deg); }
	85% { -webkit-transform: rotate(3deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes rotate {
	0% { -moz-transform: rotate(0deg); }
	17% { -moz-transform: rotate(10deg); }
	34% { -moz-transform: rotate(-10deg); }
	51% { -moz-transform: rotate(6deg); }
	68% { -moz-transform: rotate(-6deg); }
	85% { -moz-transform: rotate(3deg); }
	100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes rotate {
	0% { -o-transform: rotate(0deg); }
	17% { -o-transform: rotate(10deg); }
	34% { -o-transform: rotate(-10deg); }
	51% { -o-transform: rotate(6deg); }
	68% { -o-transform: rotate(-6deg); }
	85% { -o-transform: rotate(3deg); }
	100% { -o-transform: rotate(0deg); }
}
@keyframes rotate {
	0% { transform: rotate(0deg); }
	17% { transform: rotate(10deg); }
	34% { transform: rotate(-10deg); }
	51% { transform: rotate(6deg); }
	68% { transform: rotate(-6deg); }
	85% { transform: rotate(3deg); }
	100% { transform: rotate(0deg); }
}

Then, to implement the animation on mouseover, I add a class to the image and add this to my stylesheet.

.css-rotate:hover {
	-webkit-animation: rotate 0.7s;
	-moz-animation: rotate 0.7s;
	-o-animation: rotate 0.7s;
	animation: rotate 0.7s;
}

OK, now I know what you’re thinking. That is a lot of code to write for a small effect. The obvious reason for this is the browser support issues we face everyday in CSS. Someday, all browsers will support @keyframe and animation, thereby making our code much cleaner and shorter. For now, however, to ensure that our animations are available across as many browsers as possible, we need to use the prefixes.

For the sake of brevity, I won’t use prefixes going forward, but in your production environment you should add the different browser prefixes in.

Shake Animation

To get this image to slide back and forth, we’ll use the translate property.

@keyframes shake {
	0% { transform: translate(0px); }
	17% { transform: translate(10px); }
	34% { transform: translate(-10px); }
	51% { transform: translate(6px); }
	68% { transform: translate(-6px); }
	85% { transform: translate(3px); }
	100% { transform: translate(0px); }
}

Scale Animation

CSS

@keyframes scale {
	0% { transform: scale(1); }
	17% { transform: scale(1.2); }
	34% { transform: scale(0.8); }
	51% { transform: scale(1.1); }
	68% { transform: scale(0.9); }
	85% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

Skew Animation

@keyframes skew {
	0% { transform: skew(0deg,0deg); }
	17% { transform: skew(20deg,20deg); }
	34% { transform: skew(-20deg,-20deg); }
	51% { transform: skew(10deg,10deg); }
	68% { transform: skew(-10deg-10deg); }
	85% { transform: skew(5deg,5deg); }
	100% { transform: skew(0deg,0deg); }
}

Crazy Combination Smorgasbord

I don’t really see a need for some crazy over the top animation like this, but it just goes to show that you can combine any animations and come up with some pretty crazy effects.

CSS

@keyframes combo {
	0% { transform: scale(1); }
	10% { transform: rotate(10deg); }
	17% { transform: scale(1.2); }
	20% { transform: skew(20deg,20deg); }
	25% { transform: rotate(-10deg); }
	26% { opacity: 0.5; }
	34% { transform: scale(0.8); }
	42% { transform: rotate(6deg); }
	48% { transform: skew(-20deg,-20deg); }
	51% { transform: scale(1.1); }
	61% { transform: rotate(-6deg); }
	68% { transform: scale(0.9); }
	70% { transform: skew(10deg,10deg); }
	76% { transform: rotate(3deg); }
	85% { transform: scale(1.05); }
	98% { opacity: 1; }
	99% { transform: rotate(0deg); }
	100% { transform: scale(1); }
}
The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

16 thoughts on “CSS3 Keyframe Animation Basics

  1. jose

    Ahaha n1 “Smorgasbord”. You really picked some funny examples. Some of them very very useful to create some interaction with the user…
    btw can you tell me why IE10 cant not behave like other browsers in this slider with keyframes? it just disappear the information of the slider after the first loop of it. Any help would be appreciated thanks: http://ndsim.esec.pt/esecnew/index1.html

    Reply
    1. Brad Knutson Post author

      Hello Jose,

      Thanks for commenting! I took a look at your site and it looks like you have some browser specific stylesheets. In Firefox, it’s calling the notIE.css – which might account for the discrepancy you are seeing in IE.

      Good luck!

  2. jose

    if not IE conditional comment -> notIE.css has all animations.. that way all other browers plus IE10 can read the animation css file. info. IE10 dont read anymore conditional comments.

    I´ve no clue what is happening size it is working on first loop but when i try to repeat the slide loop doesnt work…

    Reply
    1. Brad Knutson Post author

      I hate to say it, but the way I would troubleshoot something like this is take things out piece by piece until you pinpoint what is causing the issue. Sometimes there is no way around browser-specific issues, and you have to come up with alternative solutions. This is a very strange problem, and I’m honestly not sure what is going on either!

  3. jose

    its working now. i ´had some bootstrap conflict class´s… separated them and now its working.. was making like this

    div id=”myCarousel” class=”carousel slide fade-in one”
    and changed to
    div id=”myCarousel” class=”carousel slide”
    div class=”fade-in one”

    dunno what hapenned for sure but was some sort of IE conflit. fixed thanks for your time.

    Reply
  4. Imron fhatoni

    @-webkit-keyframes emp {
    0% {margin-left:0px;}
    100% {margin-left:30px;}
    }
    @-moz-keyframes emp {
    0% {margin-left:0px;}
    100% {margin-left:30px;}
    }
    @-ms-keyframes emp {
    0% {margin-left:0px;}
    100% {margin-left:30px;}
    }
    @-o-keyframes emp {
    0% {margin-left:0px;}
    100% {margin-left:30px;}
    }
    @keyframes emp {
    0% {margin-left:0px;}
    100% {margin-left:30px;}
    }

    -webkit-transform:scaleY(1);
    -moz-transform:scaleY(1);
    -ms-transform:scaleY(1);
    -o-transform:scaleY(1);
    transform:scaleY(1);
    -webkit-animation:emp .3s infinite alternate .5s;
    -moz-animation:emp .3s infinite alternate .5s;
    -ms-animation:emp .3s infinite alternate .5s;
    -o-animation:emp .3s infinite alternate .5s;
    animation:emp .3s infinite alternate .5s;

    Reply
    1. Brad Knutson Post author

      Vikas,

      There is some CSS involved in the Apple home page, but the animations are actually created with Javascript. I think this would be a cool effect to recreate with CSS so maybe I’ll make an example and write a post about that in the near future!

      Thanks,
      Brad

    1. Brad Knutson Post author

      What exactly are you referring to? A specific stylesheet named animate.css? Or are you still referring to Apple’s CSS animations?

    1. Brad Knutson Post author

      Shemul,

      You should be able to add an HTML into the WordPress sidebar, and modify your stylesheet to include styles for that element. The CSS won’t act any differently just because it’s on WordPress!

    1. Brad Knutson Post author

      Hey Shannon – this CSS alone shouldn’t cause any page load issues, are you experiencing some?

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">