CSS3 enforcing sequential animation

Question

I am trying to create a pulsing animation, however, the steps are running all at once instead of sequentially.

What I want is for my box to go to the center, pulse, and then return to the start. What is happening is that it goes to the center, but grows at the same time, then returns pulsing on the way back.

Here is the code:

input[type="checkbox"]:checked + #test{
 -webkit-animation:pulse 5s;
}

#test{
 width:50px;
 height:50px;
 border:1px solid black;
 position:relative; 
}



@-webkit-keyframes pulse{

 33%{
     left:100px;
     top:100px;
 }

 66%{
     width:100px;
     height:100px;    
 }

 73%{
     width:50px;
     height:50px;
 }

 83%{
     width:100px;
     height:100px;
 }

 100%{
     left:0px;
     top:0px;
 }

}

http://jsfiddle.net/cMXBf/

Answer 1

You must explicitly state that a property must stay the same inbetween steps if you want it to do so.. the animation does properties individually, so if you only specify a width and a height at one step, left and top will immediately begin animating to the next stop that applies to them, ignoring the one that doesn't

Take this for example:

33%{
    left:100px;
    top:100px;
    width: 50px;
    height: 50px;
}

66%{
    left: 100px;
    top: 100px;
    width:100px;
    height:100px;    
}

73%{
    left: 100px;
    top: 100px;
    width:50px;
    height:50px;
}

83%{
    left: 100px;
    top: 100px;
    width:100px;
    height:100px;
}

100%{
    width: 50px;
    height: 50px;
    left:0px;
    top:0px;
}

Because at 66% I specify the same left and top as I did at 33%, they know not to change at all in between those two stops.

I'm not sure if this is exactly the animation if you want to happen, but you should be able to get the idea from this, otherwise if you have trouble, let me know.