終了時のアニメーションを復帰させよう

Question

私はアニメーションの "ハンバーガー"アイコンが内部にあるはずのメニューを作っています。最初は、私がtransformを使用し、それがいい感じですが、私は彼らがこのようloookいくつかの手の込んだアニメーション;-)

追加することを決定しました：

@keyframes animateFirstBar { 
    0% { 
    transform: translate(-50%, -200%); 
    } 

    50% { 
    transform: translate(-50%, 0); 
    } 

    100% { 
    transform: translateX(-50%) rotate(-45deg); 
    } 
} 

@keyframes animateSecoundBar { 
    0%, 50% { 
    transform: translate(-50%, 0); 
    } 

    51%, 100% { 
    transform: translate(-50%, 0) scaleX(.01); 
    } 
} 

@keyframes animateThirdBar { 
    0% { 
    transform: translate(-50%, 200%); 
    } 

    50% { 
    transform: translate(-50%, 0); 
    } 

    100% { 
    transform: translateX(-50%) rotate(45deg); 
    } 
} 

をそして、彼らはこのように使用されています

.main-menu { 
    $mainMenu: &; 
    position: fixed; 
    width: 300px; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: #ccc; 
    transform: translateX(-100%); 
    transition: $time transform ease-in; 

    &--active { 
    transform: none; 

    #{$mainMenu}__toggle { 
     transform: none; 
     background: rgba(0, 0, 0, 0); 
    } 

    #{$mainMenu}__toggle-line { 
     &:nth-of-type(1) { 
     animation: $time animateFirstBar forwards; 
     } 

     &:nth-of-type(2) { 
     animation: $time animateSecoundBar forwards; 
     } 

     &:nth-of-type(3) { 
     animation: $time animateThirdBar forwards; 
     } 
    } 
    } 

    &__toggle { 
    width: $width; 
    height: $width - 1; 
    position: absolute; 
    right: 0; 
    transform: translateX(100%); 
    top: 0; 
    background: yellow; 
    border: 0; 
    outline: 0; 
    transition: $time transform ease-in, $time background linear; 
    transform-origin: bottom right; 
    } 

    &__toggle-line { 
    width: 60%; 
    height: $lineHeight; 
    display: block; 
    background: black; 
    position: absolute; 
    left: 50%; 
    transition: $time transform ease-in; 
    top: (50% - ($lineHeight/2)); 

     &:nth-of-type(1) { 
     animation: none; 
     transform: translate(-50%, -200%); 
     } 

     &:nth-of-type(2) { 
     animation: none; 
     transform: translate(-50%, 0); 
     } 

     &:nth-of-type(3) { 
     animation: none; 
     transform: translate(-50%, 200%); 
    } 
    } 
} 

あなたがここでの例を見ることができます：http://codepen.io/tomekbuszewski/pen/jrzKKR?editors=0100

私の問題は、私は削除に（「出口」にアニメーションを元に戻す方法がわからない、ある--active修飾子）。私は別のアニメーションを書いたり、JSで時間をかけて削除される別のクラスを追加したりしたくありません。

Answer 1

私はこの問題を解決するために管理してきました。私は別のクラスを追加し、JSでそれをトリガーし、逆に流れる別のアニメーションセットを書き込む必要がありました。

アニメーション：

@keyframes animateFirstBar { 
    0% { transform: translate(-50%, $spacing * -100%); } 
    60% { transform: translate(-50%, 0); } 
    100% { transform: translateX(-50%) rotate(-#{$rotation}deg); } 
} 

@keyframes revertFirstBar { 
    100% { transform: translate(-50%, $spacing * -100%); } 
    60% { transform: translate(-50%, 0); } 
    0% { transform: translateX(-50%) rotate(-#{$rotation}deg); } 
} 

@keyframes animateSecoundBar { 
    0%, 60% { transform: translate(-50%, 0); } 
    61%, 100% { transform: translate(-50%, 0) scaleX(.01); } 
} 

@keyframes revertSecoundBar { 
    0%, 60% { transform: translate(-50%, 0) scaleX(.01); } 
    61%, 100% { transform: translate(-50%, 0); } 
} 

@keyframes animateThirdBar { 
    0% { transform: translate(-50%, $spacing * 100%); } 
    60% { transform: translate(-50%, 0); } 
    100% { transform: translateX(-50%) rotate(#{$rotation}deg); } 
} 

@keyframes revertThirdBar { 
    0% { transform: translateX(-50%) rotate(#{$rotation}deg); } 
    60% { transform: translate(-50%, 0); } 
    100% { transform: translate(-50%, $spacing * 100%); } 
} 

revert*Barは1クラス、他とのanimate*Barで行っています。

Answer 2

以前私は既にトランジションとトランスフォームでこのハンバーガーボタンを実装しており、アーカイブしたいものを満足していると思います。私はあなたのアプローチでアニメーションを使っていません。しかし、このスニペットを見て、そのアイデアを見てください。

function toggleMenu(x) { 
 
    x.classList.toggle("change"); 
 
} 
 

 
/* 
 
Orginal article - https://github.com/trungk18/Animated-Navigation-Menu-Icons-with-CSS3 
 
*/

/*Menu container*/ 
 

 
.content { 
 
    max-width: 40em; 
 
    margin: 1em auto; 
 
} 
 
.icon-container { 
 
    float: left; 
 
    position: relative; 
 
    cursor: pointer; 
 
    margin: 0 5em 5em; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 
.bar { 
 
    display: block; 
 
    width: 35px; 
 
    height: 5px; 
 
    background-color: #333; 
 
    margin: 6px auto; 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    border-radius: 3px; 
 
} 
 
.change { 
 
    /*Rotate first bar*/ 
 
    /*Fade out the second bar-*/ 
 
    /*Reduce width the second bar-*/ 
 
    /*Rotate last bar*/ 
 
} 
 
.change.icon-5 { 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 
.change .bar-10 { 
 
    -webkit-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7); 
 
    -moz-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7); 
 
    -ms-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7); 
 
    -o-transform: rotate(45deg) translate(8px, -3px) scaleX(0.7); 
 
    transform: rotate(45deg) translate(8px, -3px) scaleX(0.7); 
 
} 
 
.change .bar-12 { 
 
    -webkit-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7); 
 
    -moz-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7); 
 
    -ms-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7); 
 
    -o-transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7); 
 
    transform: rotate(-45deg) translate(8px, 3px) scaleX(0.7); 
 
}

<section class="content"> 
 
    <div class="icon-container icon-5" onclick="toggleMenu(this)"> 
 
    <span class="bar bar-10"></span> 
 
    <span class="bar bar-11"></span> 
 
    <span class="bar bar-12"></span> 
 
    </div> 
 
</section> 
 

 
<!--Full pen: http://codepen.io/trungk18/pen/jrrXjz-->