Transition CSS on hover-CodePudding

I'm making a :hover transition on an a element that is inside an unordered list, ul.

I would like to do the transition on the color at the same time but i don't know how.

ul.centered-navbar > li > a{
    text-decoration: none;
    background-image: linear-gradient(#55d6aa, #55d6aa);
    background-size: 0% 0.1em;
    background-position-y: 100%;
    background-position-x: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out !important;
}

ul.centered-navbar > li > a:hover, ul > li > a:focus, ul > li > a:active {
    background-size: 100% 0.1em;
    background-position-x: 0%;
}

<ul >
    <li >
         <a  href="./todo.html">About Us</a>
    </li>
    <li >
         <a  href="./todo.html">Servizi</a>
    </li>
    <li >
         <a  href="./todo.html">Offerte</a>
    </li>
    <li >
        <a  href="./todo.html">Contratti</a>
    </li>
</ul>

CodePudding user response：

If I'm understanding correctly, you just want to also transition in the foreground color like so;

ul.centered-navbar > li > a {
    text-decoration: none;
    background-image: linear-gradient(#55d6aa, #55d6aa);
    background-size: 0% 0.1em;
    background-position-y: 100%;
    background-position-x: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color .3s ease-in-out;
    cursor: pointer;
}

ul.centered-navbar > li > a:hover,
ul > li > a:focus,
ul > li > a:active {
    background-size: 100% 0.1em;
    background-position-x: 0%;
    color: #55d6aa;
}

<ul >
    <li >
         <a  href="./todo.html">About Us</a>
    </li>
    <li >
         <a  href="./todo.html">Servizi</a>
    </li>
    <li >
         <a  href="./todo.html">Offerte</a>
    </li>
    <li >
        <a  href="./todo.html">Contratti</a>
    </li>
</ul>

CodePudding user response：

To transition the color at the same time, you can add the transition property to the color property in your CSS code like this:

ul.center-navbar > li > a{
    text-decoration: none;
    color: #000;
    background-image: linear-gradient(#55d6aa, #55d6aa);
    background-size: 0% 0.1em;
    background-position-y: 100%;
    background-position-x: 100%;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out !important;
}

ul.center-navbar > li > a:hover, ul > li > a:focus, ul > li > a:active {
    color: #fff;
    background-size: 100% 0.1em;
    background-position-x: 0%;
}

With this, both the color and background-size properties will transition smoothly on hover, focus, or active state.