animation

Enables to animate an element. Every animation consists of the animation properties, e.g. delay and duration, and the related keyframes, which define its appearance.

Compatibility

  • -webkit-animation Safari 5+, Chrome 10+ iOS 3.2+ Android 4+ Blackberry 7+
    • @-webkit-keyframes
  • animation Firefox 16+ Internet Explorer 10+ Opera 12.1+ IE Mobile 10+
    • @keyframes

Not supported by Firefox prior to version 5, Internet Explorer prior to version 10, Opera prior to version 12 and Opera Mini. For detailed compatibility info see caniuse.com.

  • Firefox 16+
  • Safari 5+, Chrome 10+
  • Internet Explorer 10+
  • Opera 12.1+
  • iOS 3.2+
  • Android 4+
  • Blackberry 7+
  • IE Mobile 10+

General description

Animation properties

Multiple animations can be specified comma separated. There is also the possibility for separated notations.

animation: 1 animationName 2 4s 3 linear 4 1.5s 5 infinite 6 alternate 7 none

  • 1 The name of the animation as specified at the keyframes. Many of the available CSS properties can be animated. If set to none no animation is executed.
  • 2 The duration of the animation, in this case it lasts 4 seconds. Defaults to 0 meaning that there is no animation at all (which is actually senseless). Negative values are not allowed.
  • 3 Optional. The timing-function, which describes how the animation will proceed over its duration. It applies to every single keyframe and not the whole animation and is specified using a bezier curve (and can also be set as one). In the current case the animation is played linear without an acceleration or a slowdown. Defaults to ease which results in a fast beginning and a slowdown at the end. ease-out is quite the same but not so fast at the beginning. ease-in accelerates the animation smoothly at the beginning with no slowdown at the end. At last ease-in-out stands for an acceleration at the beginning and a slowdown at the end.
    There is also the possibility of step-values, which let the animation jump between the individual keyframes instead of a smooth transition. For example to get an animation with 8 frames, you can use steps(8) (example).
  • 4 Optional. The animation starts with a delay of 1.5 seconds. If not set or set to 0 the animation will begin immediately, if negative it will begin part-way through its play cycle.
  • 5 Optional. The iteration-count defines how often the animation is played. The default value is 1, meaning that it will play from the beginning to the end once. A value of infinite makes the animation to run forever, decimal values cause it to end in between its play cycle.
  • 6 Optional. The direction of the animation. If set to alternate every second iteration of the animation is played back to front. Defaults to normal, meaning that every play cycle starts from the beginning.
  • 7 Optional. The fill mode. If set to forwards, the last keyframe remains at the end of the animation, as far as the iteration-count (5) is uneven. If set to backwards and a delay (4) is specified likewise, the first keyframe is shown at the start of the animation instead of the normal appearance of the element. both combines these two value, the standard value none omits them.
 
Inspect me!?

Keyframes

@keyframes 1animationName {
	20% {top: 0px}
	333% {top: 50px; 4animation-timing-function: ease-out}
	5100% {top: 100px; left: 10px}
}
  • 1 The name of the animation. Links the keyframes to the animation itself and must be the same as 1 at the animation properties.
  • 2 A keyframe (as well as 3 and 4). Consits on one side of a percentage value – which determines the placement of the keyframe in the animation -, as well as one or more CSS properties and values that define the state of the animation at this point.
    In this case it’s the starting point of the animation, since it has a percentage value of 0 (can also be defined by the keyword from). At this point the top position of the element is 0px.
  • 3 Optional. At 33% of the animation’s time the element is at a top position of 50px, which brought it a bit downwards.
  • 4 Optional. Additionally it is possible to set a timing-function per keyframe which overwrites the general timing function set at 3 at the animation properties. Also takes the same values.
  • 5 The end of the animation. It’s also possible to use the keyword to instead of 100%. Finally the top value of the element changes to 80px, moving it further down. Furthermore it has adopted a left position of 10px which moved it a bit right.

Separated notations

Sets the same animation properties like above.

animation-name: animationName

animation-duration: 4s

animation-timing-function: linear

animation-delay: 1.5s

animation-iteration-count: infinite

animation-direction: alternate

animation-fill-mode: none

Example

Two animations specified at once

animation: 1 changeColor 3s infinite, 2 changeSize 2s ease-in 1s infinite

3@keyframes changeColor {
	0% {
		background-color: red;
		border-color: black;
	}
	100% {
		background-color: green;
		border-color: yellow;
	}
}
4@keyframes changeSize {
	0% {transform: scale(1)}
	65% {transform: scale(1.2)}
	100% {transform: scale(1.4)}
}
  • 1 The first animation for the element has a duration of 3 seconds for each iteration and repeats infinitely. Since there is no timing-function set it defaults to linear.
  • 2 The second animation lasts 2 seconds and has a timing-function of ease-in (smooth acceleration at the beginning, no slowdown at the end). It starts after a delay of 1 second and together with the duration of 2 seconds it also last 3 seconds.
  • 3 The keyframes for the first animation: The element starts with a background-color of red as well as a border-color of black and finishes with a background-color of green and a border-color of yellow at the end.
  • 4 The keyframes for the second animation, which starts at the original size of the element, adopts 1.2 times the size at 65% and ends with 1.4 times the size.
 
Inspect me!?

Blinking animation

animation: 1 blink 1s step-end infinite

2@keyframes blink {
	0% {background-color: blue}
	50% {background-color: black}
}
  • 1 One iteration of the animation lasts one second and changes immeditately between its keyframes without a transition. It runs infinitely.
  • 2 The background-color changes from blue to black.
 
Inspect me!?

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

x The live example can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.
  • mk

    What about “html class=” that I noticed in your document? I haven’t seen it before. Is it current best practice or is it an elegant refinement?

    • http://preeminentproductions.com/blog Anthony
    • http://www.css3files.com Christian Krammer

      Where have you noticed this class? I just had a look and wasn’t able to find it. Before I used the class for the color-switcher, but this functionality is gone now. But otherwise the usage isn’t intended here.

  • http://www.cyberspacebuilder.com Altaf Rahman

    I learning css3 now a days. I got a great tutorials from your site. Thanks! :)

    • http://www.css3files.com Christian Krammer

      Thank you for the compliment. I really like the style of your website by the way. :)

  • Kishore

    This is Great site and css3 syntax explanation is very good. Thank you very much Sir

  • http://mintik.com Ali

    Very useful article. Thanks for that explanation.

  • Salim

    it is such a nice reference site for css3

  • SeliC – http://selic.co/

    Help full

  • Brendufat

    A beautiful and stimulating article, Gratülierungen ! Stimulation means question(s) :
    1- You don’t explain how your “Start animation” buttons work. I understand that, since the href of such a button is the div to animate, clicking on the button puts the div in the :target state. Then a CSS rule says that the div should be animated when in this state. Am I right ?
    2- I guess this is not the only way to start an animation, and that some magical javaScript could achieve the effect. Anyway, this pure HTML/CSS solution is very elegant.
    3- and this arises the third question : how do you STOP these animations ??
    Noch einmal Danke für all diese Arbeit :-)

    • Chris_Krammer

      Thank you for your kind words.

      Your questions:
      1. and 2. You are right, the animation is triggered with the :target selector. As soon as the link is clicked, the element with the animation becomes the target of this action and the animation is started. But since it’s not supported in IE < 9 it's safer to use jQuery to add a class to the element, which should be animated:
      $('.link').on('click', function() {
      $('.element').addClass('animation');
      });
      3. To stop the animation (with pure CSS) would only be possible with a second link, which points to another hash tag (#) or none at all. With jQuery you just need to remove the class with the animation and it stops: $('.element').removeClass('animation');

      But the correct triggering and stopping of pure CSS animations can be a bit tricky, even in combination with jQuery. So if I use animations, that aren't pure eye-candy, I use jQuery to animate as often as possible.

    • Brendufat

      Thanks for the fast and detailed answer. I agree with you on the preferrable use of some JS for a robust solution, and there is certainly a high-flight philosophical article to write (if not already written) about CSS3 blurring the separation between presentation and action…

      Back to ground level : I too thought that changing the target would be enough to stop the animation. It works partly : on this page, starting an animation does stop the previous one (if any). But clicking on a “normal” link sending to somewhere else in the page doesn’t stop anything. Funny, isn’t it ? (tested only with FF 18). Probably related to the fact that the URL bar doesn’t change when you click on such a “normal” link while an animation runs. This sames URL bar does change when no animation runs. I leave solving this riddle to you and other visitors :-)

  • leeagosila

    Nice!! :)

  • feb

    thanks for nice article!

  • Somesh

    The best css3 reference and tutorials website this is. Wonderful design. Clearly explained. Thank you very much to make such a website to the society. May God bless you.

  • Arijit

    Thanks for the awsome article

  • Arunkumar Gudelli

    Awesome article.. I created Animated walking man effect using CSS3 Animations.. Have a look..

    http://www.arungudelli.com/2013/10/css3_animations.html

  • xrebyc

    nice tutorial :) I created an animation too, take a look here

  • shafeek gadiyar

    stick man walking in html5

  • shafeek gadiyar

    how to make possible stick man walking animation in html5?

  • roblevintennis

    Wow, never thought reading some reference docs would be so fun…nice job! I’ll definitely be back for more CSS3 refs!