jQueryで2回目のクリックでCSSアニメーションを逆にする方法

Question

クリックするとトリガする次のメニューアイコンのCSSアニメーションを作成しました。 jQueryを使用して2回目にクリックすると、逆にアニメーション化したいと思っています。

#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"); 
    } 
); 

。私は運がなく、このコードを試してみました：

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").click(
    function(){ 
    $("#path1, #halfLineLeft, #halfLineRight").css("animation-state", "running"), 
    $("#path1, #halfLineLeft, #halfLineRight").css("animation-direction", "reverse"); 
    } 
); 

は、ライブアニメーションでcodepenリンクです。この

$("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'); 
    } 

    });