Reversing CSS transition after unhover-CodePudding

I made this simple animation. But when I "unhover" the transitioned spans just "disappear". Is there any easy way to slide the spans back, aka. reverse the transition after unhover. Or if necessary any complicated way? If possible it would be great if the solution is CSS only. Thanks in advance!

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#wrapper {
  position: relative;
  font-family: 'Courier New', Courier, monospace;
}

#wrapper h2 {
  font-size: 8rem;
  margin: 0px;
}

#wrapper:hover span:first-of-type {
  visibility: visible;
  transform: translate(0%, 0%);
}

#wrapper:hover span:last-of-type {
  transform: translate(0%, 0%);
  visibility: visible;
}

#wrapper span {
  font-size: 8rem;
  font-weight: bold;
  transition: transform 1s;
}

#wrapper span:first-of-type {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 1;
  transform: translate(-10%, -100%);
  visibility: hidden;
  background: linear-gradient(45deg, #00ff00, #00ff80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#wrapper span:last-of-type {
  position: absolute;
  top: 0%;
  left: 50%;
  z-index: 1;
  transform: translate(10%, 100%);
  visibility: hidden;
  background: linear-gradient(45deg, #00ff80, aqua);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div id="container">
<div id="wrapper">
  <h2>Hi</h2>
  <span>H</span>
  <span>i</span>
</div>
</div>

CodePudding user response：

Because visibilty cannot be animated smoothly, thus it is recommended to use a scalable value for visibility animation such as opacity.

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#wrapper {
  position: relative;
  font-family: 'Courier New', Courier, monospace;
}

#wrapper h2 {
  font-size: 8rem;
  margin: 0px;
}

#wrapper:hover span:first-of-type {
  opacity: 1;
  transform: translate(0%, 0%);
}

#wrapper:hover span:last-of-type {
  transform: translate(0%, 0%);
  opacity: 1;
}

#wrapper span {
  font-size: 8rem;
  font-weight: bold;
  transition: transform 1s, opacity 1s;
}

#wrapper span:first-of-type {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 1;
  transform: translate(-10%, -100%);
  opacity: 0;
  background: linear-gradient(45deg, #00ff00, #00ff80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#wrapper span:last-of-type {
  position: absolute;
  top: 0%;
  left: 50%;
  z-index: 1;
  transform: translate(10%, 100%);
  opacity: 0;
  background: linear-gradient(45deg, #00ff80, aqua);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div id="container">
<div id="wrapper">
  <h2>Hi</h2>
  <span>H</span>
  <span>i</span>
</div>
</div>

But if you have to animate visibility for some reason, you may specify the animation-timing-function of visibility to step-end to make it disappear at the last moment:

#wrapper:not(:hover) span {
  transition: transform 1s, visibility 1s step-end;
}

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#wrapper {
  position: relative;
  font-family: 'Courier New', Courier, monospace;
}

#wrapper h2 {
  font-size: 8rem;
  margin: 0px;
}

#wrapper:hover span:first-of-type {
  visibility: visible;
  transform: translate(0%, 0%);
}

#wrapper:hover span:last-of-type {
  transform: translate(0%, 0%);
  visibility: visible;
}

#wrapper span {
  font-size: 8rem;
  font-weight: bold;
  transition: transform 1s;
}

#wrapper span:first-of-type {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 1;
  transform: translate(-10%, -100%);
  visibility: hidden;
  background: linear-gradient(45deg, #00ff00, #00ff80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#wrapper span:last-of-type {
  position: absolute;
  top: 0%;
  left: 50%;
  z-index: 1;
  transform: translate(10%, 100%);
  visibility: hidden;
  background: linear-gradient(45deg, #00ff80, aqua);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* added */

#wrapper:not(:hover) span {
  transition: transform 1s, visibility 1s step-end;
}

<div id="container">
<div id="wrapper">
  <h2>Hi</h2>
  <span>H</span>
  <span>i</span>
</div>
</div>