Knowledge needed: Basic HTML and CSS Requires: HTML/CSS editor, modern browser

Project time: 1-2 hours

DOWNLOAD SOURCE FILES
By Estelle Weyl on September 13, 2011 | 9 comments
From the basics of animation keyframes to expert animation tips that will save you many a
headache, Estelle Weyl, web developer and author of HTML5 and CSS3 For the Real
World, takes you on a tour of all you need to know to get up and running with CSS3
animations
"Animating" with CSS used to be limited to hovering effects. With :hover and :focus pseudo
classes we've been able to change color, size, background-color, position, and many other
CSS properties based on user action. The :hover trick provides only two states - hovered
and non-hovered - with only two keyframes: start and end, and no tweening between these
states, creating a harsh and sudden transition. This isn't really animation.
CSS3 transitions solved the tweening issue, enabling transitioning from non-hovered to
hovered style (and back) over a period of time. Vendor-prefixed transitions are well
supported in modern browsers (starting with IE10 and Firefox 4.0). With transitions, we can
create limited simple animations with two keyframes - a start and finish point - and to a single
iteration. Most developers have been overcoming these limitations by using JavaScript to
animate. With increased support of CSS3 animations, it's time to rely less on JavaScript and
animate natively with CSS.
In this article you'll learn what you need to know to get started with CSS3 animations. Note
that animations are currently supported, prefixed with -webkit- and -moz-, in Chrome, Safari
4+, Firefox 5+, Android Chrome, and iOS webkit.
ADVERTISEMENT
TW ITTER FACEBOOK RSS
CREATIVEBLOQ.COM
Download the 75 best free fonts
CREATIVEBLOQ.COM
The 30 best Photoshop plugins
CREATIVEBLOQ.COM
60 brilliant examples of
infographics
CREATIVEBLOQ.COM
Reinventing the rsum as an
infographic
CREATIVEBLOQ.COM
Behind the scenes of Firefox's
new branding
TRENDING POSTS
Register Login Check out our shop for subscription offers, buy single issues and more!
A Future Site
H O M E N EW S TU TO RIALS FEATU R ES IN TERVIEW S O PIN IO NS JO BS SH O P PR EM IUM
Mobile
Tweet

Like

Share Share
The top 20 data visualisation tools
Build a basic responsive site w ith CSS
20 top w eb design and developm ent
trends for 2013
10 tips for designing localised
interfaces
N ew tools for w eb design and
developm ent: M arch 2013
A masterclass in CSS animations | Tutorial | .net magazine http://www.netmagazine.com/tutorials/masterclass-css-animations
1 of 11 05/04/2013 02:11
Masters' Degree in Design
www.lecolededesign.com
Shape the Future of our Societies Study
Design in France
Keyfram es
To animate elements you first need to define a keyframe animation. Then you apply that
animation to the elements you want to animate. The first step is to define your animation,
which you can attach to an infinite number of elements. Animations are similar to transitions
except they provide for more granular control. The minimum required to define an animation
is an animation name, a starting point or keyframe and an ending point or keyframe.
@keyframes flapping { 1.
from { 2.
background-size: 100px 100px; 3.
} 4.
to { 5.
background-size: 20px 100px; 6.
} 7.
} 8.
In the above code, we've declared the animation name, a starting keyframe and an ending
keyframe. If youre using an appropriate browser, you can click on the butterfly to see the
animation in action:
While in the above animation, we've used the from and to keyterms. We could also have
used percentages, which is generally what you will want to use.
@keyframes flapping { 1.
0% { 2.
background-size: 100px 100px; 3.
} 4.
100% { 5.
background-size: 20px 100px; 6.
} 7.
} 8.
A few things to remember when declaring animations:
Bangl adeshi Li nux
Hosti ng
Eicra.com
Web Hosting PHP, MySQL,
cPanel -WHM Secure &
Reliable Reseller hosting
AAIP for 100%
Pl acement
www.ArenaParkStreet.com
Join our Flagship animation
program Call Toll Free at
1-800-103-1818
2D Ani mati on
Servi ces SA
www.seamonster.co.za
Sea Monster Let us tell your
story!
Bl oody funny
comedy
youtu.be/iG2m8iCLI0g
Join Professor Zircoco
Subscribe for the latest
episodes
Start Hosti ng
Busi ness
www.xeonbd.com
Flexible & Cheap Web
Hosting Plans, 24x7
Support, USA Based Data
Center
Masters' Degree in Design
www.lecolededesign.com
Shape the Future of our Societies Study
Design in France
TH E W EEK IN W EB D ESIGN
Sign up to our 'W eek in W eb Design' new sletter!
Continue
VIEW SOURCE
COPY CODE
VIEW SOURCE
COPY CODE
website. By using this site, you agree that we may store and access cookies on your device. Find out more and set your preferences here.

A masterclass in CSS animations | Tutorial | .net magazine http://www.netmagazine.com/tutorials/masterclass-css-animations

2 of 11 05/04/2013 02:11
Don't forget the %
When it comes to lengths, like px and ems, 0 is 0. Note in animation declarations. Don't
forget the % unit of measurement.
Don't forget the 100%, or final to keyframe declaration
While the 0% and 100% are not required by the specifications, they need to be included for
current browser implementations.
Don't quote the animation name
Although quoting the animation provides for more legible markup, adding quotes to the name
in incorrect according to W3C draft specifications, and will make the animation fail in Firefox.
One of the features that makes keyframe animation more powerful than transitions is the
ability to control the animation on a granular level. For example, the rainbow animation below
has 11 keyframe blocks:

Click on the ball to see the rainbow animation
@keyframes rainbow { 1.
0% {background-color: #FF0000;} 2.
10% {background-color: #FF8000;} 3.
20% {background-color: #FFFF00;} 4.
30% {background-color: #80FF00;} 5.
40% {background-color: #00FF00;} 6.
50% {background-color: #00FF80;} 7.
60% {background-color: #00FFFF;} 8.
70% {background-color: #0080FF;} 9.
80% {background-color: #0000FF;} 10.
90% {background-color: #8000FF;} 11.
100% {background-color: #FF0080;} 12.
} 13.
Had we used CSS transitions to go from #FF0000 to #FF0080, we would have transitioned
from red to magenta, showing only colours in the red spectrum. With animation keyframe
granular control, our animation goes from red to pink by going through the colour spectrum.
We can include as many animatable properties as we want to animate in any keyframe block.
See the example here.
@keyframes rainbowdimmer { 1.
0% {background-color: #FF0000; opacity: 1;} 2.
20% {background-color: #FFFF00;} 3.
40% {background-color: #00FF00;} 4.
50% {opacity: 0;} 5.
60% {background-color: #00FFFF;} 6.
80% {background-color: #0000FF;} 7.
100% {background-color: #FF0080; opacity: 1;} 8.
} 9.
In this example, opacity will change from opaque to transparent and back opaque, while the
colour will go through the spectrum. Note that we didn't need to declare every property in
every keyframe block. Rather, we only included properties when that property needed a
keyframe definition.
VIEW SOURCE
COPY CODE
VIEW SOURCE
COPY CODE
website. By using this site, you agree that we may store and access cookies on your device. Find out more and set your preferences here.

A masterclass in CSS animations | Tutorial | .net magazine http://www.netmagazine.com/tutorials/masterclass-css-animations

3 of 11 05/04/2013 02:11
Note that duplicate keyframe selectors are not supported:
100% {background-color: #FF0080;} 9.
100% {opacity: 1;} 10.
When two keyframe blocks have the same selector, as per the cascade, the last block
overrides previously declared blocks. Had we written the above, line 9 would be ignored,
overridden by line 10, which has the same keyframe selector value.
On the other hand, if you have an animation that has duplicate keyframes, you don't have to
declare the same block twice. Instead, separate the selectors of the duplicate keyframes with
a comma. Note that the order of the declarations doesn't matter (100% can come before
0%). In the butterfly example, we want to start and end our butterfly movement animation with
the butterfly in the exact same location. Instead of declaring two separate code blocks, we
simply separate the first and last keyframe selectors with a comma:
@keyframes movement { 1.
0%, 100% { 2.
top: 0; 3.
left: 0; 4.
} 5.
25% { 6.
top: 0; 7.
left: 100px; 8.
} 9.
50% { 10.
top: 100px; 11.
left: 100px; 12.
} 13.
75% { 14.
top: 100px; 15.
left: 0; 16.
} 17.
} 18.
When creating a bouncing ball animation, at every bounce the ball is at the bottom of the
container:
Click on the image to see the animation
We declare three of the four 'bottom' keyframes together, since the final keyframe includes
more than one property. You can only use comma-separated duplicate keyframes when all
the property/values in the keyframe block are the same.
@-webkit-keyframes bouncing { 1.
40%, 70%, 90%{ 2.
animation-timing-function: ease-out; 3.
bottom: 0; 4.
} 5.
0% { 6.
bottom: 200px; 7.
left: 0; 8.
animation-timing-function: ease-in; 9.
} 10.
VIEW SOURCE
COPY CODE
VIEW SOURCE
COPY CODE
website. By using this site, you agree that we may store and access cookies on your device. Find out more and set your preferences here.

A masterclass in CSS animations | Tutorial | .net magazine http://www.netmagazine.com/tutorials/masterclass-css-animations

4 of 11 05/04/2013 02:11
55% { 11.
bottom: 50px; 12.
animation-timing-function: ease-in; 13.
} 14.
80% { 15.
bottom: 25px; 16.
animation-timing-function: ease-in; 17.
} 18.
95% { 19.
bottom: 10px; 20.
animation-timing-function: ease-in; 21.
} 22.
100% { 23.
left: 110px; 24.
bottom: 0; 25.
animation-timing-function: ease-out; 26.
} 27.
} 28.
Note that we had two properties being animated. We moved the ball up and down numerous
times with granular control. The left to right motion, however, was smooth, and therefore only
needed two keyframe declarations. We've also changed the animation timing function to
make the bounce look smooth and natural. We'll discuss the animation timing function part of
this animation below, but the important thing to note is that the animation-timing-function is
the only animation property that can be included within keyframe declarations. The W3C has
an incomplete list of properties that are animatable. We can include the animation timing
function to define how the animation moves to the next keyframe. Without it, our bouncing
ball animation above was very jumpy.
Vendor prefixing
Our animations above won't actually work anywhere. At the time of this writing, the only
browsers that support animations require vendor prefixes. We have to declare the
@keyframes three times: with -moz- for Firefox 5+, with the -webkit- prefix for Safari,
Chrome and the various mobile webkit browsers and last, without any prefixes, for when
browsers support the vendor-neutral syntax.
/* for Webkit browsers */ 1.
@-webkit-keyframes flitter { 2.
0%{ 3.
-webkit-transform: scale(1,1); 4.
} 5.
100% { 6.
-webkit-transform: scale(0.2,1); 7.
} 8.
} 9.
/* for Firefox */ 10.
@-moz-keyframes flitter { 11.
0%{ 12.
-moz-transform: scale(1,1); 13.
} 14.
100% { 15.
-moz-transform: scale(0.2,1); 16.
} 17.
} 18.
/* Future-proofing: for browsers supporting vendorles syntax */ 19.
@keyframes flitter { 20.
0%{ 21.
transform: scale(1,1); 22.
} 23.
100% { 24.
transform: scale(0.2,1); 25.
} 26.
} 27.
In this example, we've added the vendor prefixing in front of the 'keyframes' keyword, and
also for the transform property, as vendor-less transforms are not yet supported.
VIEW SOURCE
COPY CODE
website. By using this site, you agree that we may store and access cookies on your device. Find out more and set your preferences here.

A masterclass in CSS animations | Tutorial | .net magazine http://www.netmagazine.com/tutorials/masterclass-css-animations

5 of 11 05/04/2013 02:11
goes from 0% keyframe to 100% over 500ms, but then jumps back to 0%. It scales over
Anim ating Elem ents
Now that we have animations declared, we can animate elements on our page by attaching
animations to them. We need to at least provide the element with the animation name and
duration. There are many other properties that enable us to control the appearance of
animations, but the name and duration are required.
Let's start defining our butterfly:
.butterfly { 1.
height: 100px; 2.
width: 100px; 3.
position: absolute; 4.
top: 50px; left: 50px; 5.
background-image: url(butterfly.png); 6.
} 7.
Anim ation-nam e and anim ation-duration
Our first goal is to make the butterfly flitter. To apply an animation we provide the element
with the name of the animation to use AND the duration of that animation. For that we have
two properties: animation-name and animation-duration. The animation-name property
accepts a comma separated list of unquoted animation names. These are the user defined
names you defined in your @keyframes rule. So far in the examples above, we can include
flapping, flitter, rainbow, rainbowdimmer and bouncing.
In addition to adding the animation name(s), we have to define how long the animations
should last in seconds(s) or milliseconds (ms). Add the length of time it takes for the
animation to iterate once from 0% to 100% with the animation-duration property. The
minimum duration is 1ms. In our flapping example, we have been using 500ms, or 0.5s, in the
above examples.
.butterfly { 1.
-webkit-animation-name: flitter; 2.
-webkit-animation-duration: 500ms; 3.
-moz-animation-name: flitter; 4.
-moz-animation-duration: 500ms; 5.
animation-name: flitter; 6.
animation-duration: 500ms; 7.
} 8.
anim ation-iteration-count
Our butterfly isn't flitting (or fluttering?). By default, animations only iterate through once. To
make it flit several times, or forever, we can add the 'animation-iteration-count' property. The
value of which is either an integer or the key term infinite. The default value is 1.
.butterfly { 1.
-webkit-animation-name: flitter; 2.
-webkit-animation-duration: 500ms; 3.
-webkit-animation-iteration-count: infinite; 4.
-moz-animation-name: flitter; 5.
-moz-animation-duration: 500ms; 6.
-moz-animation-iteration-count: infinite; 7.
animation-name: flitter; 8.
animation-duration: 500ms; 9.
animation-iteration-count: infinite; 10.
} 11.
anim ation-direction
The animation above is annoying not just because it won't stop, but because the animation
VIEW SOURCE
COPY CODE
VIEW SOURCE
COPY CODE
VIEW SOURCE
COPY CODE
website. By using this site, you agree that we may store and access cookies on your device. Find out more and set your preferences here.

A masterclass in CSS animations | Tutorial | .net magazine http://www.netmagazine.com/tutorials/masterclass-css-animations

6 of 11 05/04/2013 02:11
time from 100px wide to 20px wide, then jumps back to 100px as it starts its next iteration.
The default process is for an animation to iterate from 0% to 100% over time, then to jump
back to 0% to start the next iteration.
Sometimes you want animations to behave like transitions: when you transition on hover, the
animation reverses on mouse out. With the animation-direction property, every other
animation can be set to go from 100% to 0%. While a bouncing ball goes only in one
direction, always going from 0% to 100%, the flitting of a butterfly is a good example of the
need for alternating the direction of the animation. Let's add it to our butterfly:
.butterfly { 1.
-webkit-animation-name: flitter; 2.
-webkit-animation-duration: 500ms; 3.
-webkit-animation-iteration-count: 40; 4.
-webkit-animation-direction: alternate; 5.
-moz-animation-name: flitter; 6.
-moz-animation-duration: 500ms; 7.
-moz-animation-iteration-count: 40; 8.
-moz-animation-direction: alternate; 9.
animation-name: flitter; 10.
animation-duration: 500ms; 11.
animation-iteration-count: 40; 12.
animation-direction: alternate; 13.
} 14.
anim ation-tim ing-function
We can fine-tune our animation further by setting animation timing functions to control how
these intermediate values are computed over time. The default value is 'ease' but most
animal motions really ease in and out over time. We add the ease-in-out value to our
animation timing function.
.butterfly { 1.
-webkit-animation-name: flitter; 2.
-webkit-animation-duration: 500ms; 3.
-webkit-animation-iteration-count: 40; 4.
-webkit-animation-direction: alternate; 5.
-webkit-animation-timing-function: ease-in-out; 6.
-moz-animation-name: flitter; 7.
-moz-animation-duration: 500ms; 8.
-moz-animation-iteration-count: 40; 9.
-moz-animation-direction: alternate; 10.
-moz-animation-timing-function: ease-in-out; 11.
animation-name: flitter; 12.
animation-duration: 500ms; 13.
animation-iteration-count: 40; 14.
animation-direction: alternate; 15.
animation-timing-function: ease-in-out 16.
} 17.
We've also added ease-in and ease-out at different steps in our bounce animation. The
animation-timing-function is the only animation property that can be included within keyframe
declarations. Include the animation timing function to define how the animation moves to the
next keyframe. Without it, our bouncing ball animation above would have been very jumpy.
anim ation-delay
By default, animation begin immediately when applied. We can control this with the animation
delay property. While this is a simple to understand property, there is a cool trick to know
about animation-delay. If you want an animation to begin halfway through the animation,
include an animation-delay-value that is negative. For example, if you have a 10s animation,
including an animation-delay: -5s; will cause the animation to start immediately, starting half
way through the animation.
anim ation (shorthand)
VIEW SOURCE
COPY CODE
VIEW SOURCE
COPY CODE
website. By using this site, you agree that we may store and access cookies on your device. Find out more and set your preferences here.

A masterclass in CSS animations | Tutorial | .net magazine http://www.netmagazine.com/tutorials/masterclass-css-animations

7 of 11 05/04/2013 02:11
Animation properties are verbose. Too verbose. Especially with vendor prefixing.
Fortunately, there is a shorthand. The shorthand must include the name and duration of the
animation. If you are including a delay, make sure the duration comes first! The order is
generally:
animation: <name> <duration> <timing-function> <delay> <iteration-count> 1.
<direction> <fill-mode>; 2.
We can write the animation above in three much simpler lines:
.butterfly { 1.
-webkit-animation: flitter 500ms ease-in-out 5s 40 alternate; 2.
-moz-animation: flitter 500ms ease-in-out 5s 40 alternate; 3.
animation: flitter 500ms ease-in-out 5s 40 alternate; 4.
} 5.
A single element can have multiple animations at the same time. We have a flittering butterfly,
but it's not going anywhere. Let's make it move around the box as if it were actually flying.
.butterfly { 1.
-webkit-animation: flitter 300ms ease-in-out 1s 40 alternate, movement 5s linear 2s; 2.
-moz-animation: flitter 300ms ease-in-out 1s 40 alternate, movement 5s linear 2s; 3.
animation: flitter 300ms ease-in-out 1s 40 alternate, movement 5s linear 2s; 4.
} 5.
Always consider the duration and interaction counts of the animations to time your
animations well. Also consider what properties are being animated. While we can apply as
many animations as we want to an element, we can only apply a single occurrence of a
property at a time. In other words, while we may have four animations that we want to attach
to an element, we can only apply one transform and one top/left position value at a time.
.butterfly { 1.
-webkit-transform-origin:-20px -20px; 2.
-moz-transform-origin:-20px -20px; 3.
-webkit-animation: 4.
flitter 300ms ease-in-out 1s 40 alternate, 5.
bouncing 10s ease-in-out 1s, 6.
rotation 0.5s ease 24 1s; 7.
-moz-animation: 8.
flitter 300ms ease-in-out 1s 40 alternate, 9.
bouncing 10s ease-in-out 1s, 10.
rotation 0.5s ease 24 1s; 11.
animation: 12.
flitter 300ms ease-in-out 1s 40 alternate, 13.
bouncing 10s ease-in-out 1s, 14.
rotation 0.5s ease 24 1s; 15.
} 16.
We added transform-origin to make the rotation appear more random and natural. Also note
that we have three animations ending at 13, 11 and 13 seconds respectively. When including
multiple animations, consider their timing relative to each other.
Anim ation-fill-m ode
Our butterfly nicely floats down the page, but jerks back up to the top left when the bouncing
animation is complete. With the animation-fill-mode property we can tell the butterfly to stay
at the bottom right when the animation ends.
The animation-fill-mode takes one of four values: backwards, forwards, none or both, with
default being none. The value of backwards makes the element go directly to keyframe 0%
VIEW SOURCE
COPY CODE
VIEW SOURCE
COPY CODE
VIEW SOURCE
COPY CODE
VIEW SOURCE
COPY CODE
website. By using this site, you agree that we may store and access cookies on your device. Find out more and set your preferences here.

A masterclass in CSS animations | Tutorial | .net magazine http://www.netmagazine.com/tutorials/masterclass-css-animations

8 of 11 05/04/2013 02:11
XHTML in her blog at evotech.net/blog
R E LAT E D A R T IC LE S
Create a 404 page with CSS3 animations
Create a clickable accordion with CSS
animation
CSS3 animations: four stunning examples
The top 10 CSS3 techniques
Create a responsive wireframe
Estelle W eyl
www.standardista.com/
Estelle Weyl started her professional life
in architecture, then managed teen health
programs. In 2000, she took the natural
step of becoming a web standardista.
Estelle shares esoteric tidbits learned
while programming CSS, JavaScript and
when the page loads, even if there is an animation-delay, staying there until the animation
starts.
The value of forwards tells the browser to stop the animation on the last keyframe at the end
of the last iteration and not revert back to its pre-animation state.
The value of both applies both backwards and forwards, sitting on the first keyframe until the
animation begins (no matter the length of the positive animation delay) and staying on the
last keyframe at the end of the last animation. This is what we want for our bounce:
.butterfly { 1.
-webkit-transform-origin:-20px -20px; 2.
-moz-transform-origin:-20px -20px; 3.
-webkit-animation: 4.
flitter 300ms ease-in-out 1s 40 alternate, 5.
bouncing 10s ease-in-out 1s both, 6.
rotation 0.5s ease 24 1s forwards; 7.
-moz-animation: 8.
flitter 300ms ease-in-out 1s 40 alternate, 9.
bouncing 10s ease-in-out 1s both, 10.
rotation 0.5s ease 24 1s forwards; 11.
animation: 12.
flitter 300ms ease-in-out 1s 40 alternate, 13.
bouncing 10s ease-in-out 1s both, 14.
rotation 0.5s ease 24 1s forwards; 15.
} 16.
Pausing and playing anim ations
In addition to pausing on the first and last keyframes with animation-fill-mode, we can pause
along the way with the animation-play-state. By default, all animations are 'running', but they
can be paused:
.butterfly:hover { 1.
-webkit-animation-play-state:paused; 2.
-moz-animation-play-state:paused; 3.
animation-play-state:paused; 4.
} 5.
To see this hover declaration in action, simply hover over any animating butterfly above.
We've walked through a very simple animation. This is just to show what is possible. CSS
animations are very powerful, providing a way of animating without the use of JavaScript,
while providing event handlers should JavaScript events be necessary.
It is important to remember that just because animation is possible, does not mean that it is
always a good idea. Use animation judiciously. We don't want to return to the animated gif
state of the late 1990s, or the abundance of Flash intros look of the early 2000s.
Remember: Just because you can, doesn't mean you should!
Tweet
352

108
Like

57

TAGS CSS CSS3
VIEW SOURCE
COPY CODE
VIEW SOURCE
COPY CODE
68
Share Share
website. By using this site, you agree that we may store and access cookies on your device. Find out more and set your preferences here.

A masterclass in CSS animations | Tutorial | .net magazine http://www.netmagazine.com/tutorials/masterclass-css-animations

9 of 11 05/04/2013 02:11
and provides tutorials and detailed grids
of CSS3 and HTML5 browser support in
her blog at www.standardista.com.
9 C O M M E N T S
OliverCaldwell
September 13, 2011 at 10:11
Thank you!
Finally helped me take the plunge into CSS3 animations. I can't wait until we can stop using these
vendor prefixes.
Report abuse
1
samhs
September 13, 2011 at 14:34
don't forget -ms- and -o- vendor prefixes for IE9 and Opera respectively.
Report abuse
2
OniLinkCR
September 13, 2011 at 16:40
My question and this may be a n00b one, but should I go with animations as opposed with CANVAS? I
wanted to animate a bird like flying across the screen, but not sure which one to go with.
Report abuse
3
chriscoyier
September 13, 2011 at 20:28
@samhs - That's generally correct, but IE and Opera aren't supporting CSS animations yet in any
fashion and it's unclear how they are going to do so when/if they do it. So it's presumptuous to start
including those vendor prefixes for animations just yet. Kinda like box-shadow. There was never an
-o-box-shadow. When Opera implemented it, they did the spec version from the get-go. (I'm fairly
sure).
Report abuse
4
samhs
September 13, 2011 at 23:42
I take your point Chris, but it's no more presumptuous than using the non-vendor-prefixed version at
this point - after all, CSS3 isn't yet ratified, is it? Anyway, am just sayin' ;-)
Report abuse
5
chriscoyier
September 14, 2011 at 04:36
I don't use non-vendor-prefixed unless at least one browser is supporting it either (just my preference,
but it has been known to be a problem in the past -- people getting bitten using non-vendor-prefix
blindly). And as it happens TODAY IE 10 (pp3?) is released and now has -ms-animation ..., so there
ya go, start using that one.
Report abuse
6
Estelle
September 14, 2011 at 17:19
IE10 P3 has added vendor-prefixed animations.
http://msdn.microsoft.com/en-gb/ie/hh272902.aspx#_CSSAnimations
So you will want to add @-ms-keyframes and -ms-animation: to your code.
IE10 also has 3D transforms and lots of other wonderful goodies.
Also, above I did add non-vendor prefixed version since it seems like the syntax is very stable, but it is
not always a good idea. For example, border-radius and linear-gradient syntax changed during the
years it took to start implementing it.
Report abuse
7
webmaisterpro
September 17, 2011 at 09:05
This is something completely new for me, looks ok, but kind a don't like framing, it is not really slight.
Report abuse
8
Mintik
October 12, 2012 at 01:23
Very helpful article. Thanks for article.
Report abuse
9
website. By using this site, you agree that we may store and access cookies on your device. Find out more and set your preferences here.

A masterclass in CSS animations | Tutorial | .net magazine http://www.netmagazine.com/tutorials/masterclass-css-animations

10 of 11 05/04/2013 02:11
Other .net sections
RSS
Hosting directory
Premium area
Advertising enquiries
Terms and Conditions
Privacy Policy
Cookie policy
Contact us
We love to get feedback, and we do our
very best to answer every email
accurately and promptly. If youve got an
idea for an article that youd like us to
run, a product youd like to pimp, or if you
simply want to ask a question of the team
nothing kinky, mind then drop us a
line. Just click the link below. It really is
that easy.
Contact us
About .net
.net is the worlds best-selling magazine for
web designers and developers, featuring
tutorials from leading agencies, interviews
with the webs biggest names, and agenda-
setting features on the hottest issues
affecting the internet today.
Read more about us
Subscribe to .net magazine
Current issue of .net
Retweet Reply Follow us
@ netm ag
Behind the scenes of Firefox's new
branding - http://t.co/WGVOk2JeyT
#illustration #advertising
8:16PM Apr 4th via HootSuite
Future is AOP and PPA Consumer Digital Publisher of the Year.
This site is part of Future plc, an international media group and leading digital publisher. We produce content across five core areas:
TechRadar
T3
MacLife
Gizmodo UK
More...
Technology
CVG
PC Gamer
GamesRadar
Total Film
More...
Entertainment
Classic Rock
MusicRadar
Guitarist
Metal Hammer
More...
Music
Digital Camera World
Mollie Makes
Photography Week
The Simple Things
More...
Creative
BikeRadar
Cyclingnews
ChopMTB
TriRadar
More...
Sport & Auto
About Future Jobs PR Advertising Privacy Policy Cookies Policy Terms & Conditions Subscriptions Investor Relations Contact Future
Future Publishing Limited, Beauford Court, 30 Monmouth Street, Bath BA1 2BW. All rights reserved. England and Wales company registration number 2008885.
You need to login or register to post a comment
Login Forgot username/password?
website. By using this site, you agree that we may store and access cookies on your device. Find out more and set your preferences here.

A masterclass in CSS animations | Tutorial | .net magazine http://www.netmagazine.com/tutorials/masterclass-css-animations

11 of 11 05/04/2013 02:11