How to reverse transition on hover out?

问题

Can I reverse transition animation on hover out by CSS?

When I hover out "Menu" text, I need to slide to right blue line and after 400ms delay slide from left grey line.

Is it possible?

.menu {
  display: inline-block;
  position: relative;
  font-family: sans-serif;
  font-size: 32px;
  font-weight: bold;
}
.menu:before, .menu:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 4px;
  background-color: blue;
  transform: scaleX(0);
  transform-origin: right center;
  transition: 500ms transform cubic-bezier(0, 0.75, 0.45, 1);
}
.menu:after {
  background-color: grey;
  transform: scaleX(1);
  transform-origin: left center;
}
.menu:hover {
  cursor: pointer;
}
.menu:hover:before {
  transform: scaleX(1);
  transform-origin: left center;
  transition-delay: 400ms;
}
.menu:hover:after {
  transform: scaleX(0);
  transform-origin: right center;
}

<div class="menu">
  Menu
</div>

回答1:

You can easily do this using gradient and less of code. The trick is to have a gradient with blue on the left and grey on the right and a transparent part in the middle. The transparent part combined with background-size will create the delay between both color when changing the background-position from left to right.

In this case I made the grey and blue to be 25% of the gradient so the size need to be 400% to cover 100% of the element width.

.menu {
 display: inline-block;
  position: relative;
  font-family: sans-serif;
  font-size: 32px;
  font-weight: bold;
  background-image:
    linear-gradient(to right,blue 0,blue 25%,transparent 25%,transparent 75%,grey 75%);
  background-size:400% 4px;
  background-position:bottom right;
  background-repeat:no-repeat;
  transition:1s all;
}
.menu:hover {
  background-position:bottom left;
}

<div class="menu">
  Menu
</div>

Here is another example in case you need to increase the delay and keep the same duration, simply make the transparent part bigger:

.menu {
 display: inline-block;
  position: relative;
  font-family: sans-serif;
  font-size: 32px;
  font-weight: bold;
  background-image:
    linear-gradient(to right,blue 0,blue 10%,transparent 10%,transparent 90%,grey 90%);
  background-size:1000% 4px;
  background-position:bottom right;
  background-repeat:no-repeat;
  transition:1s all;
}
.menu:hover {
  background-position:bottom left;
}

<div class="menu">
  Menu
</div>

UPDATE

As per your comment, you can do something like this:

.menu {
 display: inline-block;
  position: relative;
  font-family: sans-serif;
  font-size: 32px;
  font-weight: bold;
  background-image:
    linear-gradient(to right,blue 0,blue 25%,transparent 25%,transparent 75%,grey 75%),
    linear-gradient(to right,grey 0,grey 25%,transparent 25%,transparent 75%,blue 75%);
  background-size:400% 4px,400% 0px;
  background-position:bottom right,bottom left;
  background-repeat:no-repeat;
  transition:background-position 1s,background-size 0s 1s;
}
.menu:hover {
  background-position:bottom left,bottom right;
  background-size:400% 0px,400% 4px;
}

<div class="menu">
  Menu
</div>

回答2:

Another css method similar to your original code but using positions and borders. However the gradient method that @Temani Afif answered is less code and very clever.

See fiddle demo http://jsfiddle.net/joshmoto/2f4zm1wk/

.menu {
  display: inline-block;
  position: relative;
  font-family: sans-serif;
  font-size: 32px;
  font-weight: bold;
  overflow: hidden;
  cursor: pointer;

  &:after,
  &:before {
    content: "";
    position: absolute;
    bottom: 0;
    display: block;
    height: 4px;

  }

  &:before {
    background: grey;
    left: -80px; right: 0;
    transition: left .6s ease;
    border-left: 80px white solid;

  }

  &:after {
    background: blue;
    left: 0; right: calc(100% + 80px);
    transition: right .6s ease;

  }

  &:hover {

    &:before {
      left: calc(100% + 80px);

    }

    &:after {
      right: -80px;

    }

  }

}

CSS from sass output...

.menu {
  display: inline-block;
  position: relative;
  font-family: sans-serif;
  font-size: 32px;
  font-weight: bold;
  overflow: hidden;
  cursor: pointer;
}

.menu:after,
.menu:before {
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  height: 4px;
}

.menu:before {
  background: grey;
  left: -80px;
  right: 0;
  transition: left .6s ease;
  border-left: 80px white solid;
}

.menu:after {
  background: blue;
  left: 0;
  right: calc(100% + 80px);
  transition: right .6s ease;
}

.menu:hover:before {
  left: calc(100% + 80px);
}

.menu:hover:after {
  right: -80px;
}

<div class="menu">
  Menu
</div>

来源：https://stackoverflow.com/questions/51811738/how-to-reverse-transition-on-hover-out