I'm trying to reverse the animation after the user is not hovering. I tried making a keyframe with the opposite animation, using reverse and adding transition: all 2s but neither worked. I also tried 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Your problem is that div::after:not(:hover) doesn't render an :after element in div.

Also to switch animation between hover and non hover you need to use keywords other than from to.

these changes should fix it

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