문제

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/

도움이 되었습니까?

해결책

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.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top