CSS Animations - アニメーションを自由に前後に切り替えながら、クリックイベントでアニメーションを反転させるにはどうすればよいですか？

Question

私は、CSSアニメーションを使用してXになるためのハンバーガーアイコンをアニメーション化しました。 animation-directionプロパティを使用してアニメーションを元に戻したい。しかし、demo hereを見ると、アニメーションをスムーズに逆転させることができないだけでなく、2回目のクリックでフォワードアニメーションを再生できなくなることがわかります（jsトグル）。

これをどのようにしてスムーズにアニメートできますか？

.openUpArrowAnim .hamburger:nth-child(1) { 
    position: relative; 
    display: block; 
    width: 2em; 
    height: .3em; 
    background-color:white; 
    margin-right: auto; 
    margin-left: auto; 
    transform-origin: 25px -3px; 
    -webkit-transform-origin: 23px 7px; 

    animation-name: crossBar1; 
    animation-duration: .5s; 
    animation-timing-function: ease; 
    animation-fill-mode: forwards; 
    animation-direction: normal; 
} 

.openUpArrowAnim .hamburger:nth-child(2) { 
    position: relative; 
    display: block; 
    width: 2em; 
    height: .3em; 
    background-color:white; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    margin-right: auto; 
    margin-left: auto; 
    animation: crossBar2 .5s ease .2s forwards; 
} 

.openUpArrowAnim .hamburger:nth-child(3) { 
    position: relative; 
    display: block; 
    width: 2em; 
    height: .3em; 
    background-color:white; 
    margin-right: auto; 
    margin-left: auto; 
    transform-origin: 25px -3px; 
    -webkit-transform-origin: 25px -3px; 
    -ms-transform-origin: 25px -3px; 
    animation: crossBar3 .5s ease forwards; 
} 

.openUpArrowRvrs .hamburger:nth-child(1){ 

    animation-name: crossBar1; 
    animation-duration: 1s; 
    animation-timing-function: ease; 
    animation-direction: reverse; 
} 
.openUpArrowRvrs .hamburger:nth-child(2){ 
    animation: crossBar2 1s ease .2s reverse both; 
} 
.openUpArrowRvrs .hamburger:nth-child(3){ 
    animation: crossBar3 1s ease reverse forwards;  
} 

@keyframes crossBar1{ 
    0% { transform: translateY(0px); } 
    50% { transform: translateY(9px); } 
    100% { transform: rotate(-45deg); } 
} 

@keyframes crossBar2{ 
    to {width: 0px;} 
} 

@keyframes crossBar3{ 
    0% { transform: translateY(0px); } 
    50% { transform: translateY(-9px); } 
    100% { transform: rotate(45deg); } 
} 

Answer 1

この場合、アニメーションは過剰です。私はトランジションを使用します。トランスフォームのプロパティを変更するだけで（中間バーの不透明度を60fpsで滑らかに保つように移行することをお勧めします）、クラスを削除するとプロパティが元に戻され、CSSがトランジションを適用してスムーズにアニメーション化します。

$(".btn").click(function(){ 
    $(this).toggleClass("openAnim"); 
}); 

そして、あなたのCSSは次のようになります：

あなたのJSは、単にトグルなり

.btn .hamburger { 
    position: relative; 
    display: block; 
    width: 2em; 
    height: .3em; 
    background-color:white; 
    margin-right: auto; 
    margin-left: auto; 
    transition: transform ease-out 0.3s; 
} 

/**** Animation Default Arrow Up ****/ 
.btn .hamburger:first-child { 
    transform-origin: 25px -3px; 
    -ms-transform-origin:25px -3px; 
    -webkit-transform-origin: 23px 7px; 
} 

.btn .hamburger:nth-child(2) { 
    margin-top: 5px; 
    margin-bottom: 5px; 
    transition: opacity: ease-out 0.3s; 
} 

.btn .hamburger:last-child { 
    transform-origin: 25px -3px; 
    -webkit-transform-origin: 25px -3px; 
    -ms-transform-origin: 25px -3px; 
} 

/* Transition styles (replacing your keyframes) */ 

.openAnim .hamburger:first-child { 
    transform: translateY(-3px) rotate(-45deg); 
} 

.openAnim .hamburger:nth-child(2) { 
    opacity: 0; 
} 
.openAnim .hamburger:last-child { 
    transform: translateY(2px) rotate(45deg); 
} 

はここで更新fiddleです。