离开悬停后反转 CSS 动画不起作用

Question

我正在尝试在用户没有悬停时反转动画。我尝试用相反的动画制作 keyframe，使用 reverse 并添加 transition: all 2s 但都没有用。我也试过 div::after:not(:hover).

html {
background-color: black;
}

div {
  position: relative;
  width: 50vw;
  transition: all 2s reverse;
}

div:hover::after {
  position: absolute;
  content: " ";
  height: 50px;
  width: 50px;
  top: 50%;
  right: 0;
  border: solid rgb(255, 255, 255);
  border-width: 0 10px 10px 0;
  display: inline-block;

  animation: fadeMain 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
  // background-color: green;
}

div::after:not(:hover) {
  animation: fadeMain 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) reverse;
}

@keyframes fadeMain {
  from {
    opacity: 0;
    transform: translateX(0px) rotate(-45deg);
  }
  to {
    opacity: 1;
    transform: translateX(20px) rotate(-45deg);
  }
}

// Doesnt work:

// @keyframes fadeMainOut {
//   from {
//     opacity: 1;
//     transform: translateX(20px) rotate(-45deg);
//   }
//   to {
//     opacity: 0;
//     transform: translateX(0px) rotate(-45deg);
//   }
// }

    <div>
        <svg id="centerLogo" width="586" height="192" viewBox="0 0 586 192" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 192H36.5324L97.2281 82.4505L79.1057 49.2973L0 192ZM124.555 32.8649L106.145 3.43666e-05L88.023 32.8649L106.145 65.7298L176.046 192H212.291L124.555 32.8649Z" fill="white"/>
          <path d="M332.66 92.8289L335.248 89.6577L400.547 0.576604H366.315L318.277 66.3063L315.688 69.7658L313.099 66.3063L264.773 0.576604H230.541L296.127 89.6577L298.428 92.8289V93.1171L315.688 116.18L371.493 192H405.724L332.66 92.8289ZM225.651 192H259.882L307.058 128L290.086 104.649L225.651 192Z" fill="white"/>
          <path d="M551.769 3.43666e-05L498.552 72.6487V72.937L445.623 3.43666e-05H411.392L479.567 93.4054L481.58 96V96.2883L485.032 100.901V192H512.36V100.613L513.223 99.7478L515.812 96.2883V96L517.825 93.4054L586 3.43666e-05H551.769Z" fill="white"/>
        </svg>
    </div>

Answer 1

您的问题是 div::after:not(:hover) 没有呈现 div 中的 :after 元素。

此外，要在悬停和非悬停之间切换animation，您需要使用 from to 以外的关键字。

这些更改应该可以解决它

div::after {
        content: " ";
        position: absolute;
        height: 50px;
        width: 50px;
        top: 50%;
        right: 0;
        border: solid rgb(255, 255, 255);
        border-width: 0 10px 10px 0;
        display: inline-block;
        opacity: 0;
        animation: fadeMainOut 2s cubic-bezier(0.785, 0.135, 0.15, 0.86)
            forwards;
    }

    div:hover::after {
        content: " ";
        position: absolute;
        height: 50px;
        width: 50px;
        top: 50%;
        right: 0;
        border: solid rgb(255, 255, 255);
        border-width: 0 10px 10px 0;
        display: inline-block;
        animation: fadeMain 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
    }

    @keyframes fadeMain {
        from {
            opacity: 0;
            transform: translateX(0px) rotate(-45deg);
        }
        to {
            opacity: 1;
            transform: translateX(20px) rotate(-45deg);
        }
    }

    @keyframes fadeMainOut {
        0% {
            opacity: 1;
            transform: translateX(20px) rotate(-45deg);
        }
        100% {
            opacity: 0;
            transform: translateX(0px) rotate(-45deg);
        }
    }

离开悬停后反转 CSS 动画不起作用

Reversing CSS animation after leaving hover does not work

html

css

animation