CSS3 연속 애니메이션 적용

Question

나는 펄스 애니메이션을 만들려고하지만, 단계는 순차적으로가 아니라 한 번에 모두 실행됩니다.

내가 원하는 것은 상자가 펄스 중심으로 이동 한 다음 시작으로 돌아가는 것입니다. 무슨 일이 일어나고 있느냐는 중심으로 간다. 그러나 동시에 성장하고, 그 길에서 펄싱을 되 돌린다.

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/ 당신은 명시 적으로 그렇게 수행하려는 경우 속성이 같은 inbetween 단계를 유지해야 함을 명시해야

Answer 1

.. 애니메이션 : 여기

코드입니다 속성을 개별적으로 처리하므로 한 단계에서 너비와 높이 만 지정하면 왼쪽 및 위쪽이에 적용되는 다음 중지 인 에 즉시 애니메이션이 시작되어 1 번째를 무시합니다 하지 않는에서

예를 들어이 걸릴 : 나는 33 %에 그랬던 것처럼 66 %에 나는 그들이 모두 그 두 정거장 사이에서 변경하지 알고, 같은 왼쪽 상단을 지정

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; 
} 

때문에 .

정확히 원한다면 애니메이션인지 잘 모르겠지만이 문제에 대한 아이디어를 얻을 수 있어야합니다. 그렇지 않으면 문제가있을 경우 알려주세요.