悬停时如何反转过渡? [英] How to reverse transition on hover out?

问题描述

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

Can I reverse transition animation on hover out by CSS?

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

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

有可能吗?

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

推荐答案

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

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.

在这种情况下，我将灰色和蓝色设为渐变的 25％，因此大小需要为 400％才能覆盖 100％.

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>

更新

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

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>

这篇关于悬停时如何反转过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！