css3 transiciones al revés

[cequiel]

Hola a todos. Llevo dándole vueltas a un tema de transiciones en CSS3 y no se me ocurre cómo solucionarlo. He creado el siguiente ejemplo de transiciones que funciona sólo en Chrome y en el iPad (no funciona en Firefox, Opera y por supuesto tampoco en IE):
http://www.soloproyectos.com/temp/test.php

Cuando pinchas en el link 'Play!', primero se mueve el cuadrado rojo y, tras una pausa de un segundo, se desplaza el cuadrado amarillo. El problema es que cuando le doy de nuevo a "Play!", debería realizar el mismo movimiento, pero al revés. Es decir, primero se debería desplazar el cuadrado amarillo hasta su posición inicial y, tras una pausa de un segundo, debería desplazarse el cuadrado rojo. Sin embargo no sucede así. Cómo podría solucionarlo? Gracias por vuestra ayuda. Aquí está el código:

Código HTML:

<style type="text/css">
    div.square {
        position: fixed;
        background: yellow;
        width: 320px;
        height: 240px;
        -webkit-transition: left 1s 1s;
    }
    div.square div.inner-square {
        position: fixed;
        left: 80px;
        top: 60px;
        background: red;
        width: 160px;
        height: 120px;
        -webkit-transition: left 1s;
    }
    
    div.forward {
        left: 860px;
    }
    div.forward div.inner-square {
        left: 940px;
    }
</style>
<script type="text/javascript">
$(function() {
    var playLink = $('#play');
    playLink.click(function() {
        var square = $('.square');
        
        if (square.hasClass('forward')) {
            square.removeClass('forward');
        } else {
            square.addClass('forward');
        }
        
        this.blur();
        return false;
    });
});
</script> 

[Ruben_JD]

Lo solucionaste porque lo veo bien.
porque no mejor utilizas dos botones uno play y otro back para que veas si el evento al que llamas es el correcto asi te daras cuenta cual es el error.
tu quieres hacer algo similar a esto?
Suerte.

[kseso?]

De la forma como tiene planteado el efecto no es este foro de css el más oportuno.

Utiliza un js para aplicar o remover una regla de css que siempre tiene las mismas declaraciones transition: left 1s 1s;

¿No podría hacer que se invierta el delay de las cajas en el retorno?

Pida le trasladen el tema a un foro más conveniente, creo.

Por cierto ¿conoce la existencia de los prefijos privativos -moz-/-webkit-/-o-/-ms-?
Pues sería de agradecer que los aplique, o todos o ninguno, además de la propiedad sin ellos.

[cequiel]

Gracias por vuestra ayuda. Al final voy a hacerlo con la función "animation" de jQuery.