If you want to create a gradient effect with blue on the left, grey on the right, and a transparent middle section using minimal code, here's how you can achieve it. By setting the background-size to cover 100% of the element width and adjusting the percentages of blue, grey, and transparent parts in the gradient, you can control the transition between colors when changing the background-position.
For example, you can set the blue and grey sections to be 25% each with a total size of 400%, creating the delay effect:
.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>
To increase the delay while maintaining the same duration, you can adjust the sizes of the transparent parts accordingly, as shown in this example:
.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
If you want to further customize the transition effects, you can use multiple gradients with different color combinations and sizes. Here's an example that creates a more complex transition:
.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>