悬停时如何反转过渡？

Question

我可以在CSS悬停时反转过渡动画吗？

当我将鼠标悬停在“菜单”文本上时，我需要滑动到右蓝线，并在400ms延迟后从左灰线滑出。

有可能吗？

.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>

Answer 1

您可以使用渐变和更少的代码轻松地做到这一点。诀窍是要有一个渐变，左边是蓝色，右边是灰色，中间是透明部分。从左向右更改background-size时，将透明部分与background-position结合使用会在两种颜色之间产生延迟。

在这种情况下，我将灰色和蓝色设为渐变的25%，因此大小必须为400%才能覆盖元素宽度的100%。

.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>

这里是另一个示例，如果您需要增加延迟并保持相同的持续时间，只需将透明部分变大：

.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>

更新

根据您的评论，您可以执行以下操作：

.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>

Answer 2

另一个css方法，类似于您的原始代码，但使用位置和边框。但是@Temani Afif回答的渐变方法代码更少，也很聪明。

请参见小提琴演示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;

    }

  }

}

sass输出中的CSS ...

.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>