jQuery와 CSS3 애니메이션에 대한 도움말

저는 도움이 필요합니다. 좀 더 유동적 인 애니메이션을 만들기 위해 jQuery와 함께 css3 애니메이션을 사용하려고합니다. 제 문제점은 애니메이션이 잘 작동하지만 애니메이션이 작동 할 때입니다. 요소가 원래 크기로 되돌아갑니다. 어떻게하면 0px 너비로 애니메이션을 만들고 그 크기로 유지할 수 있습니까? 내 코드는 아래와 같습니다 :jQuery와 CSS3 애니메이션에 대한 도움말

<style> 

.element{ 
width:210px; 
height:210px; 
background-color:#000; 
} 


    .box { 
    -webkit-animation-name: BOX; 
    -webkit-animation-duration: 0.75s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: ease-in; 
    } 




    @-webkit-keyframes BOX { 
    from { 
    width: 210px; 
    } 
    to { 
    width: 0px; 
    } 
    } 
</style> 

<html> 
<div class="element"></div> 

$('.element').click(function(){ 
$(this).addClass('box'); 
}); 

</html>

출처

2011-04-06 mcbeav

프로덕션 코드가이 코드와 비슷한 경우 CSS 전환을 사용하는 것이 좋습니다. Opera, Webkit 및 Firefox에서 지원되며 구문이 더 간단합니다. – Duopixel

상자 클래스에 width:0px;을 추가하십시오. 애니메이션 만 정의 했으므로 영구 속성도 필요합니다.

여기는 jsfiddle입니다.

보너스 : 이제 비 웹킷 브라우저에서도 개체를 숨 깁니다.

출처

2011-04-06 23:35:42 RSG

감사합니다. 매력과 비슷합니다. 다시 한 번 감사드립니다. 모질라와 비슷한 구문이 있다면 어떨까요? – mcbeav

Javascript 없이도 할 수 있을지 확신하지 못합니다. – RSG

jQuery와 CSS3 애니메이션에 대한 도움말

답변

관련 문제