Grow your CSS skills. Land your dream job.

Last updated on:

Keyframe Animation Syntax

Basic Declaration & Usage

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above

Multiple steps

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

#box {
   animation: fontbulger 2s infinite;
}

If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values:

@keyframes fontbulger {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate.

Calling keyframe animation with separate properties

.box {
 animation-name: bounce;
 animation-duration: 4s;
 animation-iteration-count: 10;
 animation-direction: alternate;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
 animation-delay: 2s;
}
timing-function ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
duration & delay Xs or Xms
duration-count X
fill-mode forwards, backwards, both, none
animation-direction normal, alternate

Animation Shorthand

Just space-separate all the individual values. The order doesn't matter except when using both duration and delay, they need to be in that order. In the example below 1s = duration, 2s = delay, 3 = iterations.

animation: test 1s 2s 3 alternate backwards

Combine transform and animation

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Multiple animations

You can comma-separate the values to declare multiple animations on a selector.

.animate-this {
   animation: 
      first-animation 2s infinite, 
      another-animation 1s;
}

Steps()

The steps() function controls exactly how many keyframes will render in the animation timeframe. Let's say you declare:

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time.

.move {
  animation: move 10s steps(10) infinite alternate;
}

The math works out nicely there. Every one second, the element will move 10px to the left and 10px down, until the end of the animation, and then again in reverse forever.

This can be great for spritesheet animation like this demo by simurai.

Browser Support

Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

More Resources

Comments

  1. ng87
    Permalink to comment#

    is from & to equal to using 0% and 100%?

  2. Hello Chris Coyier,
    The tips and tricks are nice, but if you include the demo link then it would be much helpful. For audience to view the effect live and you too to increase potential returning traffic.

    • Guys – this is the snippets section! It’s literally the only section of the site that doesn’t have demos/tutorials, it’s purely the grab-n-go snippets… As described!

    • hi Adam, doesn’t the inability to do what Spence is looking for sort of defeats the purpose of animating in this way?
      I’m encountering exactly the same problem. Any further thoughts on how to resolve it without hover approach?

  3. I agree with Hiren. A demo attached to the snippets (whenever possible) would be very nice.

  4. Permalink to comment#

    Agreed on the demo attached to snippets. Just something super-simple.

  5. Permalink to comment#

    Hi Chris, you can use -webkit-animation-delay to delay the effects.

  6. hey, Chris, the delay can be found here:

    http://css-infos.net/property/-webkit-animation-delay

    you can also use shorthand to set multiple declarations in one step:

    http://css-infos.net/property/-webkit-animation

    cheers!
    Atg

  7. Alex Bass
    Permalink to comment#

    Just experimenting, I found the webkit delay syntax is:

    “-webkit-animation-delay: 5s;”

    Pretty simple!

  8. Spence
    Permalink to comment#

    Hi and many thanks for the code snippet. Can anyone please help me with the following opacity animation:

    The div layer starts invisible it then animates to fully visible (after a 2second delay) and remains in that state.

    Currently with the code above (including the delay code) I can only get the following:
    The div layer starts visible it then animates (flashes invisible then animates) to fully visible (after a 2second delay) and remains in that state.

    If I put an opacity: 0; on the div then the following occurs:
    The div layer starts invisible it then animates to fully visible (after a 2second delay) and then returns to invisible.

    Is what I am attempting even possible or am I just being a Muppet?

    many thanks.

    • Permalink to comment#

      Hey Spence –

      I think what you’re looking for is only possible on hover/state change. This is how you do it:

      1. Put your animate attributes on the element(s) you want to animate, ie:

      .box {
      -webkit-transition: all 0.2s ease-in-out;
      }

      2. On the hover:

      .box:hover {
      background: red;
      }

      That’s it! Change as necessary.

    • P
      Permalink to comment#

      Adam, doesn’t the inability to do what Spence is looking for sort of defeats the purpose of animating in this way?
      I’m encountering exactly the same problem. Any further thoughts on how to resolve it without hover approach?

    • Mairead Buchan
      Permalink to comment#

      Hi Spence,

      I was just scratching my head about the same question and came across this page:

      http://css3animator.com/2010/12/how-to-control-your-css3-animations/

      I think this is what you’re looking for, you want to use forwards to make the last keyframe of your animation persist so you can make it look as if something has appeared

      I also discovered if you use from and to, this behaviour is the default but it you want to use several keyframed states then it will default back to its original state unless you state the fill-mode

      hth.
      m.

    • Niloy

      Just use -webkit-animation-iteration-count: 1;

  9. P
    Permalink to comment#

    nice!

    thanks Mairead

  10. Permalink to comment#

    cool tut
    thank you

  11. Hey Chris! Really informative snippet! You’re blog just keeps getting better and better =)

    Anyway, you mistakenly repeated ‘has the same’ in “has the same starting…”

    Thanks!

  12. Lee
    Permalink to comment#

    Hi there all!
    I’m new to CSS and a bit stuck! I have “2” images 70px By 70px I want “1” to stay still and “2” to rotate. image “2” has just a little dot and image “1” has an inner circle and an outer circle.. So I want the little dot to rotate between the inner and outer circle.. So far I’ve done it but the dot makes a big rotation off the screen!! I don’t no if it’s the stage of my rotation or not using margin’s the right way or the perspective origin not being there or non of the above. Thanks for any help in advance and hope someone knows what I’m going on about

  13. This is really nice! Thanks guys for sharing this. I’m going to try it now :)

  14. I’ve lost count how many times I’ve come back to this page. A great, simple writeup.

  15. Hello everybody!
    What about overriding a @keyframe animation set? I can’t figure out if it’s possible (using chrome).
    I explain myself:
    I made a webapp with several CSS3 features and @keyframes named sets for UI to interact beautifully. My app is customizable by different connected users. The customization is made by importing a css file that override some colors and layouts. I want people how knows CSS3 awesomness to be able to override my standard animations (triggered via javascript). But it looks like if you write a second @keyframes with the same name than first’s, the second definition is ignored.
    Any help with this?

  16. Permalink to comment#

    Love it!

  17. jitesh
    Permalink to comment#

    nice content but boring site colors, Older site is much better in terms of colors

  18. thank u chris. love it.

  19. Jack
    Permalink to comment#

    I can not load this page in ie8. The loading time take more…

    • Chris
      Permalink to comment#

      Hi Jack
      I realise in web design terms it’s a lifetime since you made your comment here but I was wondering whether you found a solution. I’ve had this problem for over a week and cannot find an answer.
      Through much trial and error it appears IE8 simply will not ignore keyframes and as a result just gives up and freezes.
      I’ve tried hiding the animations in a conditional comment and only serving them to IE9 + and all other browsers. Which works as expected, only as you probably know, IE10 does not support conditional comments!
      Any help would be greatly appreciated…

  20. Chris
    Permalink to comment#

    Hi guys I want to be able to control the “frames” so I have 5 frames inside of one CSS sprite. They represent each state. I want them to play out over a specified amount of time with out the even motion in between I just want it to go from one frame to another over a specified amount of time. It’s hard for me to explain but flash has a way to do this rather easily.

  21. Hello Chris,

    I found your website very helpful. I learnt & implemented lot of new ideas from your site.

    I was thrilled when I learnt this specific animation trick – usage of keyframes. I have implemented this to highlight the Archives on my site ABAP Help when people hover on it.

    Thanks again so much for all these tutorials.

    Regards,
    Naimesh Patel

  22. Simeon
    Permalink to comment#

    I have a question about combining animations – when I try the below I get either ‘leaffall’ OR ‘drop’ randomly on refresh. I was expecting both to happen simultaneously.

    
    .leaf {
            -webkit-animation: leaffall 2s infinite, drop 4s forwards;
            z-index: 30;
            }
            
    @-webkit-keyframes leaffall {
        0%  { -webkit-transform-origin: 50% -50%;   }
        33% { -webkit-transform-origin: 50% -50%; -webkit-transform: rotate3d(0,0,1,-50deg); }
        66% { -webkit-transform-origin: 50% -50%; -webkit-transform: rotate3d(0,0,1,50deg) ;}
        100% { -webkit-transform-origin: 50% -50%; -webkit-transform: rotate3d(0,0,1,0deg) ;}
    }
    
    @-webkit-keyframes drop {
        0%  { -webkit-transform-origin: 50% -50%;  -webkit-transform: translate (0px,10px);}
        100% { -webkit-transform-origin: 50% -50%; -webkit-transform: translate(0px,600px)  }
    }
    

    Anyone seen this problem?

  23. Thank you so much for this snippet, Chris.

    Regards from Brazil!

  24. Permalink to comment#

    This is great! I was staying away from CSS3 animations because I thought the syntax was too difficult, but you’ve made it pretty simple to understand. Thanks.

  25. For the infinite loop you could change the “to” value to 359deg to prevent it stopping

  26. Ganesh
    Permalink to comment#

    Its awesome, very easy to understand and a great thank for giving such a wonderful tutorial. I want to know if i want an animation (eg: text animation -fading) on sentance after another how can I achieve it. We do similar kind of text animation when we create presentations.

  27. “The order doesn’t matter except when using both duration and delay, they need to be in that order. In the example below 1s = duration, 2s = delay, 3 = iterations.”

    This doesn’t work, if you set the number of iterations to infinite.
    Instead infinite has to be at the end, hasn’t it?

    Thanks for this useful snippets! :)

  28. alliz
    Permalink to comment#

    It should be noted that the keyframe sequence is effectively “reset” if the element is altered via jQuery or some other thing. Keyframes for cycling through border colors for a play button on a player gets reset everytime the button switches from “play” to “pause”. For instance:

    @keyframes change_border
    {
    0% {border-color: #202424;}
    25% {border-color: #a09b8c;}
    75% {border-color: #69707d;}
    100% {border-color: #737e88;}
    }
    div#player_control {
    animation: change_border 66s infinite;
    animation-direction:alternate;
    -moz-animation: change_border 66s infinite;
    -moz-animation-direction:alternate;
    -webkit-animation: change_border 66s infinite;
    -webkit-animation-direction:alternate;
    }

    This “infinite” sequence of color changing would be interrupted every time the #player_control layer was altered. This is undesirable when other things are also tied to this animation sequence, but aren’t subject to the interruption. Could also simply be undesirable.

    • I’ve had this same problem. I am animating some list elements on page load so they kind of fly in from the side one at a time and then they are the navigation. On hover, the text in the list element twitches to the side a bit, but when it returns to the default state after the hover effect, the animation is queued again and the list element comes back in from the side again. Very obnoxious.

      Have you, or has anyone found a solution to this?

  29. Permalink to comment#

    Thank you for this script.

  30. Akash
    Permalink to comment#

    Works great :)
    Thanks.

  31. Permalink to comment#

    It seems that Android 2.2 doesn’t perform well if you specify more than two states in percentages:

    a.) this doesn’t work

    
    @-webkit-keyframes dummyTest {
    	0% {
    		font-size: 10px;
    	}
    	30% {
    		font-size: 15px;
    	}
    	100% {
    		font-size: 12px;
    	}
    }
    

    b.) this works

    
    @-webkit-keyframes dummyTest {
    	0% {
    		font-size: 10px;
    	}
    	100% {
    		font-size: 12px;
    	}
    }
    
    

    You can’t spot the problem if you change user agent in webkit browser (etc. safari) or using Android SDK Tools. Bug seems to appear just on particular Android 2.2 devices.

    tested on:

    HTC Wildfire
    Mozilla/5.0 (Linux; U; Android 2.2.1; sv-se; HTC Wildfire Build/FRG83D) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

    HTC Evo
    Mozilla/5.0 (Linux; U; Android 2.2; en-us; Sprint APA9292KT Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

  32. Shaye

    You have some of the best CSS tips. Your directions are often better (more detailed and advanced) than the W3 Schools I appreciate your quality posts Chris. Thank you.

  33. Is there a way to point the animation to another div? Say you make one div like a button to make the other div do the action?

    
    .blackbox {
    	background: #000; 
    	width: 770px; 
    	height: 300px; 
    	overflow: hidden; 
    	padding: 15px; 
    position: relative;	
    	
    }
    .whitebox {
    	position: absolute; 
    	right: 15px; 
    	top: 15px; 
    	height: 270px; 
    	padding: 15px; 
    	width: 200px;
    	background: rgba(255,255,255,.9); 
    }
    .blackbox:hover {
    	-webkit-animation: slideout 20000s;
    }
    @-webkit-keyframes slideout {
    0% 		.whitebox{positon: absolute;}
    .001% 	.whitebox{positon: absolute; right: -200px;}
    

    In this example im trying to make it when I hover on the black box the white box will move out of the way. I haven’t seen anything on triggering an animation of one div by hovering on another before, at least not with pure CSS.

    • Nevermind, I figured it out.

      
      .blackbox {
      	background: #000; 
      	width: 770px; 
      	height: 300px; 
      	overflow: hidden; 
      	padding: 15px; 
      	position: relative;	
      	
      }
      .whitebox {
      	position: absolute; 
      	right: 15px; 
      	top: 15px; 
      	height: 270px; 
      	padding: 15px; 
      	width: 200px;
      	background: rgba(255,255,255,.9); 
      }
      .blackbox:hover .whitebox {
      	-webkit-animation: slideout 20000s;
      }
      @-webkit-keyframes slideout {
      0% 		{positon: absolute;}
      .001% 	{positon: absolute; right: -200px;}
      

      by putting .blackbox:hover and .whitebox in the same selector it acts just the way I want it too.

      Awesome snippet by the way. Very helpful.

    • You could do it with nesting and sibling selectors. You could put both elements in a container div and when you want the white box to move, set the selection to something like:

      HTML:

      
           
           
      
      

      CSS:

      div>#blackbox:hover + #whiteBox {
          attribute: new value;
      }
      

      You could do it with transitions, or you could queue off an animation the same way if it’s not as simple as a transition.

  34. Bungle2000
    Permalink to comment#

    How do you set the animation parameters to be the parameters of the element from the moment the page loads.

    e.g.

    @-webkit-keyframes fade-in {
    	0%   { opacity: 0; }
    	100% { opacity: 1; }
    
    #box {
     -webkit-animation-name: fade-in;
     -webkit-animation-duration: 2s;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-timing-function: linear;
     -webkit-animation-delay: 2s;
    }

    So what happens here is that the element will appear on screen, then after 2 seconds it will dissapear and run through the animation. The desired effect is that it appears at opacity 0 until the animation starts, 2 seconds after the page is loaded.

    Is there a property I’m missing?

  35. Bungle2000
    Permalink to comment#

    Typical!! Of course I search for ages before I post, then 2 minutes after posting I carry on looking and find the answer!

    animation-fill-mode: backwards;

    was the solution.

  36. Permalink to comment#

    I created this site http://www.css3builder.com it automates the css3 gallery creation by doing the math for the keyframes etc. etc. automatically. You can create one in less than 1 minute for all browsers.

  37. Permalink to comment#

    Just a note that the upcoming IE10 will support keyframe syntax without prefixes. So, since IE9 doesn’t support keyframe animations, and since nobody will be using ‘IE10pp’ or whatever, then all examples should now omit the ‘-ms-‘ part.

    Also, all the examples on this page should be updated to include the standard syntax, for IE10, upcoming FF16 and other browsers that will eventually support keyframe animations unprefixed.

  38. Permalink to comment#

    Android browser 2.2 supports it?

  39. Koga
    Permalink to comment#

    I have a animation in an infinite loop. Have any way to set an interval between the loops?

    The property “animation-delay” just add a delay before the animation start, then loop without the delay.

    I know that I can resolve with a simple “setInterval” script, but I’m trying to figure if have any way to reach to the expected result without that.

  40. Justin
    Permalink to comment#

    When an iOS device is in the process of completing animations #1 and a user scrolls down before animation #2 started, it will simply not load animations set to load later… Any workaround ?

  41. Hey, it would be great if you include the steps() timing function. You can see more details here, for example:

    https://hacks.mozilla.org/2011/09/taking-steps-with-css-animations/

  42. Permalink to comment#

    Hello Chris for the basic animation you can use the simple code:

    .box{
    background: white;
    -webkit-transition: background 5s;
    }

    .box:hover{
    background: olive;
    -webkit-transition: background 1s;
    }

  43. Alex J

    I don’t think anyone has asked this before:

    how do you use the @-webkit-keyframes syntax in SASS (or LESS, for that matter), where the @ is a special character?

  44. bro, where can i test this code with implementing in my site..
    i.e sandbox / testdrive ??
    Thanks for the content.

  45. This is a very helpful article. Just wondering how you could include audio in the js so it syncs with the play/reset button?

  46. Here is an example of FELIX the cat episode of “The magic bag” done completely using css3 key frame animations. Implemented for webkit browsers only. No JS just pure CSS3

    http://pikcle.com/felix/

  47. Seb

    I couldn’t find any obvious way to delay at either ‘end’ of my looped animation (left to right, in this case).
    Ended up using:

    <

    pre>
    @-webkit-keyframes pan {
    0%, 10% { -webkit-transform: translate3d( 0%, 0px, 0px); }
    90%, 100% { -webkit-transform: translate3d(-50%, 0px, 0px); }
    }

    Just a bit annoying having to have a fake animation duration to account for delays.

  48. Kaushik
    Permalink to comment#

    Hey Guys

    Is it possible to combine 2 animations for one target.. For example rotating a menu and in the menu time changing its font-size.. Please let me know.. :)

  49. Kaushik
    Permalink to comment#

    Thanks Melwyn.. Will Try it Out… :)

  50. Permalink to comment#

    I think it’s worth pointing out that there are additional properties of animation-direction other than normal and alternate; These are reverse and alternate-reverse.

    The MDN docs has the full set of possible values, but their browser compatibility list looks a little stale. If anyone can confirm browser support for these properties I’m sure Mozilla would appreciate it :)

    Mahalo

  51. Permalink to comment#

    Is it actually possible to make an animation with the property content? Something like…

    /* THIS IS NOT WORKING */
    @keyframes loading {
      0% {
        content: ".";
      }
      50% {
        content: "..";
      }
      100% {
        content: "...";
      }
    }
    
    #loading:after {
       -animation: loading 2s steps(3) infinite;
    }
    

    Thanks

    • I ran into that just recently. No browser supports it but according to spec writers, they should, and will catch up eventually.

    • Permalink to comment#

      Ya, I think “the solution” for the moment would be to apply a mask over the “…” and animating it to cover the last char, the last two chars, and so on..

  52. Permalink to comment#

    Does anyone know of a way to prevent keyframe animations from firing when the browser is resized and it crosses breakpoints? How about on page load?

  53. Permalink to comment#

    We’ve a animation in a infinite loop. Have in any manner to set an interval between the loops?

    The property “animation-delay” just convey a delay before this animation start, then loop devoid of the delay.

    I understand that I can resolve which has a simple “setInterval” piece of software, but I’m looking to figure if have in any manner to reach on the expected result without having that.

  54. Lara Lawless
    Permalink to comment#

    Hi, I want to have multiple elements (divs) with different animations. So I have .item1 as you can see below. But I want to make an animation for another item (For example: .item2 with a different slide animation/position), but how can I assign different animations to different elements? Hope someone can help! Thanks!

    .item1 {
    position: absolute;
    background:url(../img/item.png) 0 0 no-repeat;
    top: -900px;
    width: 400px;
    height: 887px;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 0.5s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
    animation-name: slide;
    }

    @-webkit-keyframes slide {
    100% { top: -300px; }
    }

    @keyframes slide {
    100% { top: -300px; }
    }

  55. Lara Lawless
    Permalink to comment#

    Hello! I have something like this now: but I don’t know if this is the right way to do it ( name it slide 1 and slide 2)…

    @-webkit-keyframes slide { from { top:-900px; } to { top:-300px; } }
    @-moz-keyframes slide { from { top:-900px; } to { top:-300px; } }
    @keyframes slide { from { top:-900px; } to { top:-300px; } }
    
    @-webkit-keyframes slide2 { from { top:-1300px; } to { top:-500px; } }
    @-moz-keyframes slide2 { from { top:-1300px; } to { top:-500px; } }
    @keyframes slide2 { from { top:-1300px; } to { top:-500px; } }
    
    
    .lamp {
        position: absolute;
        background:url(../img/lamp.png) 0 0 no-repeat; 
        top: -900px;
        left: 0px;
        width: 400px;
        height: 887px;
        -webkit-animation: slide 0.5s forwards;
        -webkit-animation-delay: 0.52s;
        animation: slide 0.5s forwards;
        animation-delay: 0.5s;
        animation-name: slide;
    }    
    
    
    
    .hand {
        position: absolute;
        background:url(../img/hand.png) 0 0 no-repeat; 
        top: -1300px;
        left: 300px;
        width: 180px;
        height: 1320px;
        -webkit-animation: slide2 0.5s forwards;
        -webkit-animation-delay: 0.8s;
        animation: slide2 0.5s forwards;
        animation-delay: 0.8s;
        animation-name: slide2;
    }    
    
  56. Anybody know that either Compass/Sass support keyframe animation inbuild?

    • I’m sure they have support, but I use a couple of simple mixins I wrote:

      // animate with prefixes
      // @include animation(ANIMATIONNAME LENGTH REPEAT INOUT);
      @mixin animation($animate...) {
          $max: length($animate);
          $animations: '';
      
          @for $i from 1 through $max {
              $animations: #{$animations + nth($animate, $i)};
      
              @if $i < $max {
                  $animations: #{$animations + ", "};
              }
          }
          -webkit-animation: $animations;
          -moz-animation: $animations;
          -o-animation: $animations;
          animation: $animations;
      }
      
      // animation keyframes
      // @include keyframes(ANIMATIONNAME) {
      //   0% { ATTRIBUTE: VALUE; ATTRIBUTE: VALUE; }
      //   50% { ATTRIBUTE: VALUE; ATTRIBUTE: VALUE; }
      //   100% { ATTRIBUTE: VALUE; ATTRIBUTE: VALUE; }
      // }
      @mixin keyframes($animationName) {
          @-webkit-keyframes #{$animationName} {
              @content;
          }
          @-moz-keyframes #{$animationName} {
              @content;
          }
          @-o-keyframes #{$animationName} {
              @content;
          }
          @keyframes #{$animationName} {
              @content;
          }
      }
      
    • Permalink to comment#

      Thanks for sharing Josh!

  57. Jayanth
    Permalink to comment#

    Can I get the webkitAnimationDuration (javascript) equivalent for mozilla and safari browser support same in javascript.

  58. Board Results
    Permalink to comment#

    The order doesn’t matter except when using both duration and delay, they need to be in that order. In the example below 1s = duration, 2s = delay, 3 = iterations.”

    This doesn’t work, if you set the number of iterations to infinite.
    Instead infinite has to be at the end, hasn’t it?

    Thanks for this useful snippets! :)

  59. Vinod
    Permalink to comment#

    I have created one demo. Check it out

    http://jsbin.com/alOPUko/11/edit

  60. THANKS Admin . This is a very helpful article. Just wondering how you could include audio in the js so it syncs with the play/reset button?

    good luck ….Keep it up

  61. Nice resource dear but is there a way to prevent keyframe animations from firing when the browser is re-sized and it crosses breakpoints? How about on page load?

  62. Permalink to comment#

    I am trying to mix this code with another code of css but the problem I am facing is that at run time only one code is showing effect where as another one is not showing it.

  63. Permalink to comment#

    Can I get the webkitAnimationDuration (javascript) equivalent for mozilla and safari browser support same in javascript.

    BTW thanks for such a nice tutorial.

  64. Permalink to comment#

    This is exactly what i was looking for..so simple to implement dude..nice work and looks cure too :)

  65. Just experimenting, I found the webkit delay syntax is:

    “-webkit-animation-delay: 5s;”

    Pretty simple!

    http://www.results-2014.com/

  66. Jimba Tamang
    Permalink to comment#

    Anyone who wanted to put Time Interval between infinite/loop of the animation, please follow this Stackoverflow solution:

    http://stackoverflow.com/questions/18812055/css-animation-with-time-interval

    Happy CSS3 animation!

  67. Permalink to comment#

    Nice Job, This is exactly what i was looking for, CSS3 animations is difficult, because for me the syntax was very difficult, but you have done a awesome work, you just understand others in a simple way. Thanks For Sharing.

  68. Permalink to comment#

    Does anyone know of a way to prevent keyframe animations from firing when the browser is resized and it crosses breakpoints? How about on page load?

    facing issues here on:

    http://www.resultsnews.com/

  69. Permalink to comment#

    Is there any way to stop keyframe animations from firing at time of browser re sizing ? I am facing issue on my website http://bit.ly/1j84UFh

  70. Inder

    made an animation here http://jsfiddle.net/ipsjolly/DDT9b/
    But it is not that smooth. it bumps a little when it enters from one frame to other. how can i make it more jelly type like buttons in candy crush.

  71. Rolando Romero Acosta

    I am creating an animation of a character who must move his head to the right and left while moving his hands opening and closing them.

    It happens that in the CSS I think an animation with two input and both have the fill-mode parameter value with forwards. This will run the first animated properly, but the second is never executed. If I remove the first animation forwards to the second runs properly, but the first animation to end abruptly returns to its starting point.
    Can anyone tell me how to fix this.

    This is my css code:

    [Admin note]: Deleting big code dump – feel free to post a link to a Pen on CodePen.

  72. sreekanth

    the site very nice and very helpfull fro beginers

  73. Jimba Tamang

    Once again, I am landed to this page,

    Hey Chris, do you have any idea how to create some magic mixin which create CSS3 Keyframe animation including CSS3 Browser Vender Prefix?

    Once I tried to use some Mixin available over the internet, it product something like following where I want to ignore all other browser related code while it was under @-webkit.

    @-webkit-keyframes hover-icon {
    0% {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    }
    100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    }
    }

  74. Raaz

    Does anyone know of a way to prevent keyframe animations from firing when the browser is resized and it crosses breakpoints? How about on page load?

  75. Maxim Aginsky

    Thanks Chris! Any time I have a question – you always there. Thanks again!!

  76. Joe
    Permalink to comment#

    Thank you very much for the demo. This solved my animation problems I had in IE.

  77. Andrew Luhring

    This is a massively important detail:

    #box {
      -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
      -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
      -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
    
    /*  ___________________________________________________v___no__v ______________________*/
      animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+ */   /*   <--------no. */
    /* __________________________________________________^___no__^_________________________*/
    }
    
    

    Internet explorer does not get to claim the w3 standards' spec.
    That needs to be updated.
    No seriously- Internet Explorer has been the bane of every web developers' existence for entirely too long for them to get to claim that comment. It should not be confused, even for a second, that Internet Explorer is the reason that any modern css standard exists.
    That comment should be

    #box {
      -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+, Chrome  */
      -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5- 16  */
      -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12-15  */
      animation:         NAME-YOUR-ANIMATION 5s infinite; /* W3C Living Standard [1]  */ 
    }
    
    

    [1]: Firefox 16+, IE 10+.

  78. Hi Chris, you can use -webkit-animation-delay to delay the effects. It will much better if you can add demo as well.

  79. selva
    Permalink to comment#

    Hey I need to do ripple effect with 4 circles. Could you guys please help me on it using css3. Thanks in advance.

  80. Thanks so much for this. Works great with HTML5 video, just got to remember that -webkit prefix

  81. Is there a reason why you don’t condense the repetitive declarations into a comma-separated selector? i.e:

    @-webkit-keyframes NAME-YOUR-ANIMATION,
    @-moz-keyframes NAME-YOUR-ANIMATION,
    @-o-keyframes NAME-YOUR-ANIMATION,
    @keyframes NAME-YOUR-ANIMATION {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }
    
  82. Emiliano
    Permalink to comment#

    It’d be good if we could bundle the various @keyframes like CSS selectors (to save on repetition):

    @keyframes A, @-webkit-keyframes A, @-o-keyframes A {
    … opacity: 1; … /*no [-*-]transform…*/
    }
    But apparently it does not work, it isn’t recognized, I tried…
    (Just in case someone else has the same idea)

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".