悬停时如何反转过渡?

本文介绍了悬停时如何反转过渡?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我可以在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>