jQuery로 두 번째 클릭시 CSS 애니메이션을 뒤집는 방법

Question

다음 메뉴 아이콘 CSS 애니메이션을 클릭했을 때 트리거합니다. jQuery를 사용하여 두 번째로 클릭 할 때 역 애니메이션으로 만들고 싶습니다.

#path1 { 
    stroke-dasharray: 33px; 
    stroke-dashoffset: 33px; 
    animation: line 1.5s linear forwards; 
    animation-play-state: paused; 
} 

@keyframes line { 
    100% { 
    stroke-dashoffset: -15.5; 
    } 
} 

#halfLineLeft { 
    transform-origin: 1% 50%; 
    animation: shrinkleft 1s linear forwards; 
    animation-play-state: paused; 
} 

#halfLineRight { 
    transform-origin: 100% 1%; 
    animation: shrinkleft 1s linear forwards; 
    animation-play-state: paused; 
} 

@keyframes shrinkleft { 
    100% { 
    transform: scale(0,1); 
    } 
} 
svg { 
    transform: translate(350px, 200px); 
} 

이 내가 지금까지 가지고있는 jQuery를이다 ... 나는 내가 SVG 아이콘을 두 번째로 클릭하면 그 역으로 애니메이션을 만드는 방법을 알아낼 질수

$("svg").click(
    function(){ 
    $("#path1, #halfLineLeft, #halfLineRight").css("animation-play-state", "running"); 
    } 
); 

. 나는 운이없이이 코드를 시도 :

여기

$("svg").click(
    function(){ 
    $("#path1, #halfLineLeft, #halfLineRight").css("animation-state", "running"), 
    $("#path1, #halfLineLeft, #halfLineRight").css("animation-direction", "reverse"); 
    } 
); 

라이브 애니메이션과 codepen 링크입니다 :

http://codepen.io/anon/pen/xEORBJ

Answer 1

이 가장 효율적인 방법이지만, 반대로 키 프레임을 추가하고 클래스를 전환하면 작동하는 것 같다 경우 나도 몰라를 확인합니다.

codepen example

#path1.active { 
    animation: line 1.5s forwards; 
} 

#path1.inactive { 
    stroke-dashoffset: -15.5; 
    animation: unline 1s linear forwards; 
} 

#halfLineLeft.active { 
    animation: shrinkleft 1s linear forwards; 
} 

#halfLineRight.active { 
    animation: shrinkleft 1s linear forwards; 
} 

#halfLineLeft.inactive { 
    transform: scale(0, 1); 
    animation: unshrinkleft 1s linear forwards; 
} 

#halfLineRight.inactive { 
    transform: scale(0, 1); 
    animation: unshrinkleft 1s linear forwards; 
} 

#path1 { 
    stroke-dasharray: 33px; 
    stroke-dashoffset: 33px; 
} 

@keyframes line { 
    100% { 
    stroke-dashoffset: -15.5; 
    } 
} 

@keyframes unline { 
    100% { 
    stroke-dashoffset: 33px; 
    } 
} 

@keyframes shrinkleft { 
    100% { 
    transform: scale(0, 1); 
    } 
} 

@keyframes unshrinkleft { 
    100% { 
    transform: scale(1, 1); 
    } 
} 

#halfLineLeft { 
    transform-origin: 1% 50%; 
} 

#halfLineRight { 
    transform-origin: 100% 1%; 
} 

svg { 
    transform: translate(50px, 50px); 
} 

$("svg").click(
    function() { 
    $("#path1, #halfLineLeft, #halfLineRight").toggleClass("active"); 

    if (!$("#path1, #halfLineLeft, #halfLineRight").hasClass("active")) { 

     $("#path1, #halfLineLeft, #halfLineRight").addClass("inactive"); 

    } else { 
     $("#path1, #halfLineLeft, #halfLineRight").removeClass("inactive"); 
    } 
    } 
); 

Answer 2

당신은 클래스를 추가하고 제거 할 수 있습니다. 이

$("svg").on('click',function(){ 
    if($("#path1, #halfLineLeft, #halfLineRight").hasClass('forward')){ 
     $("#path1, #halfLineLeft, #halfLineRight").css("animation-direction", "reverse").removeClass('forward'); 
    }else{ 
    $("#path1, #halfLineLeft, #halfLineRight").css("animation-play-state", "running").addClass('forward'); 
    } 

    });