Home > Software engineering >  How to make an animation start when you stop hovering over text?
How to make an animation start when you stop hovering over text?

Time:10-17

I would be really happy if anyone could help me.

I'm making a navigation bar for a website and I made an animation that when you hover over a link it slowly transitions color. I made it with CSS keyframes. Does anyone know how to make it that when you stop hovering over it, it will again slowly transition back to base color instead of just changing in a moment. Thanks for all the answers in advance.

CodePudding user response:

This will transform the green text to black slowly:

<html>
    <head>
        <style>
#h1 {
    color: green;
    transition: all 2s linear;
    font-size: 50px;
}

#h1:hover {
    color: black;
}
        </style>
    </head>
    <body>
<h1 id="h1">hello</h1>
    </body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Before hovering:

image

After hovering:

image

  • Related