WebKit 저울 변환 문제

Question

웹킷 확장 기능에 대한 도움이 필요합니다.

@-webkit-keyframes expand 
{ 
    from {-webkit-transform:scale(1)} 
    to {-webkit-transform:scale(1.2)} 
} 

.image-highlight 
{ 
    -webkit-animation-name: expand; 
    -webkit-animation-duration:0.2s; 
    -webkit-animation-iteration-count:1; 
    -webkit-animation-timing-function:ease; 
} 

I 요소와 HTML있다 : 같이

나는 특성을 가진 .css 파일이 I 애니메이션하는 기능 (스케일)와 JS 파일이

<div id="slider"> 
    <img src="images/blueMarble_0.PNG" /> 
    <img src="images/blueMarble_1.PNG" /> 
    <img src="images/blueMarble_2.PNG" /> 
    <img src="images/blueMarble_3.PNG" /> 
    <img src="images/blueMarble_4.PNG" /> 
    </div> 

을 배열의 중간 이미지 내가 애니메이션을 수행하기 위해 jQuery를 문을 사용하고 있습니다 :

`$(pic[2]).addClass('image-highlight');` 

이 JQuery와 실제 이미지 크기를 조정을 (그림 [2]). 그러나 스케일링은 0.2 초 동안 발생하고 원래 크기로 축소됩니다. 0.2 초가 지나도 스케일링을 유지하려면 어떻게해야합니까? 원래 크기로 크기를 조정하고 싶지 않습니다. 애니메이션 기간을 변경하지 않고도 완료 할 수 있습니까? 제발 도와주세요. 당신의 image-highlight 클래스가 최종 키 프레임이 계속을 적용 할 때 애니메이션 후에 표시 즉시 표시 할 -webkit-animation-fill-mode: both

이 애니메이션의 초기 키 프레임의 원인이됩니다 :

Answer 1

나는 당신이 당신의 클래스에 추가 할 생각 끝내라. 당신이 사용할 수있는

다른 값 :

• 없음 - 애니메이션의 효과는 애니메이션의 정의 된 기간 동안 분명하다. (기본값)
• 뒤로 - 애니메이션의 초기 키 프레임은 애니메이션 스타일이 요소에 적용되면 바로 적용됩니다. 이것은 -webkit-animation-delay에 대해 0이 아닌 값을 갖는 애니메이션에만 영향을줍니다.
• 전달 - 애니메이션의 최종 반복이 완료된 후에도 애니메이션의 최종 키 프레임이 계속 적용됩니다.

-webkit-animation-fill-mode: forwards 등이 있습니다.