CSS3 transitions chaining

Question

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?

Answer 1

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:

http://jsfiddle.net/jfriend00/fhemr/

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;
    -webkit-animation-timing-function: ease-in-out;
}    

Answer 2

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.