Take the 2-minute tour ×

What is a syntactically clean solution to run a chain of individual CSS3 transitions on a single element, one by one? An example:

  • set left to 10px and opacity to 1 through 200ms
  • set left to 30px through 500ms
  • set left to 50px and opacity to 0 through 200ms

Can this be done without JavaScript? If not, how to code it cleanly with JavaScript?

share|improve this question

2 Answers 2

up vote 12 down vote accepted

I believe you want a CSS3 animation where you define the CSS styles at different points in the animation and the browser does the tweening for you. Here's one description of it: http://css3.bradshawenterprises.com/animations/.

You will have to check on browser support for your targeted browsers.

Here's a demo that works in Chrome. The animation is pure CSS3, I only use Javascript to initiate and reset the animation:


The CSS could be modified to make it work in Firefox 5+ also.

#box {
    height: 100px; 
    width: 100px; 
    background-color: #777;
    position: absolute;
    left: 5px;
    top: 5px;
    opacity: 0;

@-webkit-keyframes demo {
    0% {
        left: 10px;
    22% {
        opacity: 1;
    77% {
        left: 30px;
    100% {
        left: 50px;
        opacity: 0;

.demo {
    -webkit-animation-name: demo;
    -webkit-animation-duration: 900ms;
    -webkit-animation-iteration-count: 1;
share|improve this answer
Added working example to my answer. –  jfriend00 Sep 3 '11 at 18:01
That's a cool feature I didn't know, clearly more readable than transitions for more complex stuff. Thanks! –  Kos Sep 12 '11 at 10:51
This is sweet...thanks. –  Luca Fagioli Aug 22 '13 at 13:46
Quick tip I just learned about myself: using translate instead of left top etc is <s>better</s> best practice. See [css-tricks.com/tale-of-animation-performance/] and [paulirish.com/2012/… –  Greg Perham May 4 at 16:00

In pure CSS this can be done with the transition-delay property, with it you can delay the second and third transition.

I personally would like a JS solution better. timeouts or the "transitioned" event can be used to achieve this.

I would also suggest the script.aculo.us (or the beta v2: scripty2), it is especially designed to make programming these kinds of things efficient and easy.

share|improve this answer
Also, you don't need to use a separate property, it can be included in the transition shorthand. –  Lea Verou Sep 4 '11 at 3:57
Hm, is it possible to use the transition-delay method to chain several transitions on just one property? –  Kos Sep 5 '11 at 15:36

Your Answer


