Css 退出时还原动画

我正在制作一个菜单，里面应该有动画的“汉堡包”图标。起初，我使用了

transform

，它看起来很不错，但我决定添加一些更奇特的动画；-）

他们看起来像这样：

@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%);
    }
  }
}

它们的用法如下：

@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%);
    }
  }
}

您可以在这里看到示例：

---

我的问题是，我不知道如何在“退出”（删除

--active

修改器）时还原动画。我不想写另一个动画或添加另一个类，随着时间的推移，这些类将被JS删除

之前，我已经用transition和transform实现了这个汉堡包按钮，我认为它满足了您想要归档的内容。我还没有用你的方法用动画做过。但是请看一下这个片段来了解这个想法

功能切换菜单（x）{
x、 切换（“更改”）；
}
/*
原始物品-https://github.com/trungk18/Animated-Navigation-Menu-Icons-with-CSS3
*/

/*菜单容器*/
.内容{
最大宽度：40em；
保证金：1em自动；
}
.图标容器{
浮动：左；
位置：相对位置；
光标：指针；
边缘：0.5em 5em；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
过渡：均为0.3秒；
}
.酒吧{
显示：块；
宽度：35px；
高度：5px；
背景色：#333；
保证金：6px自动；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
过渡：均为0.3秒；
边界半径：3px；
}
.改变{
/*旋转第一根杆*/
/*淡出第二条-*/
/*减少第二条的宽度-*/
/*旋转最后一条*/
}
.change.icon-5{
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-ms变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
.换酒吧{
-webkit变换：旋转（45度）平移（8px，-3px）scaleX（0.7）；
-moz变换：旋转（45度）平移（8px，-3px）缩放（0.7）；
-ms变换：旋转（45度）平移（8px，-3px）缩放（0.7）；
-o变换：旋转（45度）平移（8px，-3px）缩放（0.7）；
变换：旋转（45度）平移（8px，-3px）缩放（0.7）；
}
.换酒吧{
-webkit变换：旋转（-45度）平移（8px，3px）scaleX（0.7）；
-moz变换：旋转（-45度）平移（8px，3px）scaleX（0.7）；
-ms变换：旋转（-45度）平移（8px，3px）scaleX（0.7）；
-o变换：旋转（-45度）平移（8px，3px）缩放（0.7）；
变换：旋转（-45度）平移（8px，3px）scaleX（0.7）；
}

---

之前，我已经用transition和transform实现了这个汉堡包按钮，我认为它满足了您想要归档的内容。我还没有用你的方法用动画做过。但是请看一下这个片段来了解这个想法

功能切换菜单（x）{
x、 切换（“更改”）；
}
/*
原始物品-https://github.com/trungk18/Animated-Navigation-Menu-Icons-with-CSS3
*/

/*菜单容器*/
.内容{
最大宽度：40em；
保证金：1em自动；
}
.图标容器{
浮动：左；
位置：相对位置；
光标：指针；
边缘：0.5em 5em；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
过渡：均为0.3秒；
}
.酒吧{
显示：块；
宽度：35px；
高度：5px；
背景色：#333；
保证金：6px自动；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
过渡：均为0.3秒；
边界半径：3px；
}
.改变{
/*旋转第一根杆*/
/*淡出第二条-*/
/*减少第二条的宽度-*/
/*旋转最后一条*/
}
.change.icon-5{
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-ms变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
.换酒吧{
-webkit变换：旋转（45度）平移（8px，-3px）scaleX（0.7）；
-moz变换：旋转（45度）平移（8px，-3px）缩放（0.7）；
-ms变换：旋转（45度）平移（8px，-3px）缩放（0.7）；
-o变换：旋转（45度）平移（8px，-3px）缩放（0.7）；
变换：旋转（45度）平移（8px，-3px）缩放（0.7）；
}
.换酒吧{
-webkit变换：旋转（-45度）平移（8px，3px）scaleX（0.7）；
-moz变换：旋转（-45度）平移（8px，3px）scaleX（0.7）；
-ms变换：旋转（-45度）平移（8px，3px）scaleX（0.7）；
-o变换：旋转（-45度）平移（8px，3px）缩放（0.7）；
变换：旋转（-45度）平移（8px，3px）scaleX（0.7）；
}

---

我已经设法解决了这个问题。我不得不添加另一个类，用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

与一个类一起使用，而

animate*Bar

与另一个类一起使用。

我已经设法解决了这个问题。我不得不添加另一个类，用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

与一个类一起使用，而

animate*Bar

与另一个类一起使用。

您可以使用

backwards

动画方向，但我猜您仍然必须设置另一个类。我尝试使用

alternate reverse

，但没有效果。你能发布一些例子吗？看你修复了它，你可以使用

向后

动画方向，但我猜你仍然必须设置另一个classI尝试使用

交替反向

，但没有效果。你能发布一些例子吗？看你修复了它，这（第二个例子）是我的初始动画，但我希望它更复杂。不幸的是，转换无法完成，因为它需要两个单独运行的转换（在不同的帧上）。是的，我看到它更复杂。我想你应该再写一节课。你喜欢用JS来制作这个动画吗？我不喜欢，但我想我最终还是会这么做的。这个（第二个例子）是我的初始动画，但我希望它更复杂。不幸的是，转换无法完成，因为它需要两个单独运行的转换（在不同的帧上）。是的，我看到它更复杂。我想你应该再写一封