mouse away from elements to slowly revert back to their original positions [ CSS animation ]

Question

What I have I have 1 parent div containing 2 div's of bg-color green and orange, I animated so that when I hover over them they get bg-color red for duration 1s, for now everything works fine.

what I need When I hover, it nicely animates for 1s, but when I move mouse from div's it immediately comes to original styles, but I need them to take 2s to revert back to original styles when I move mouse away from that elements

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100vh;
}

.fst--row {
    width: 80rem;
    height: 20rem;

    display: flex;
    gap: 0.7rem;
}

.fst--row>div {
    width: 50%;
    height: 100%;
}

.fst--row>div:nth-child(1) {
    background-color: #099268;
}

.fst--row>div:nth-child(2) {
    background-color: #e67700;
}

.fst--row>div:hover {
    animation: hover--flex 1s forwards;
}

@keyframes hover--flex {

    to {
        background-color: red;
    }
}

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="flexLaying.css">
</head>

<body>
    <div class="fst--row">
        <div></div>
        <div></div>
    </div>
</body>

</html>

score 0 · Accepted Answer · answered Feb 14 '23 at 05:43

To the best of my knowledge, you can't do this with pure HTML/CSS animations. However, you have some options!

Firstly, if it's just one property, you should consider the CSS transition property. You can set it on the element to change as transition: 1s background-color;, then specify the intended :hover style (e.g. background-color: blue;) as you normally would. CSS magic handles the rest :)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100vh;
}

.fst--row {
    width: 80rem;
    height: 20rem;

    display: flex;
    gap: 0.7rem;
}

.fst--row>div {
    width: 50%;
    height: 100%;
    transition: 1s background-color;
}

.fst--row>div:nth-child(1) {
    background-color: #099268;
}

.fst--row>div:nth-child(2) {
    background-color: #e67700;
}

.fst--row>div:hover {
    background-color: red;
}

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="flexLaying.css">
</head>

<body>
    <div class="fst--row">
        <div></div>
        <div></div>
    </div>
</body>

</html>

Or you can use javascript to toggle classes (Credit to https://stackoverflow.com/a/17626510/8273686), and trigger your animations that way.

$("#box1").hover(
    function () {
        $(this).removeClass('mouseleave').addClass('mouseover');
    },
    function () {
        $(this).removeClass('mouseover').addClass('mouseleave');
    }
);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100vh;
}

.fst--row {
    width: 80rem;
    height: 20rem;

    display: flex;
    gap: 0.7rem;
}

.fst--row>div {
    width: 50%;
    height: 100%;
    transition: 1s background-color;
}

.fst--row>div:nth-child(1) {
    background-color: #099268;
}

.fst--row>div:nth-child(2) {
    background-color: #e67700;
}


.mouseover {
  animation: mouseover 1s forwards;
}

.mouseleave {
  animation: mouseleave 1s forwards;
}

@keyframes mouseover {
    from {
      background-color: #099268;
    }
    to {
        background-color: red;
    }
}

@keyframes mouseleave {
    from {
      background-color: red;
    }
    to {
        background-color: #099268;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="flexLaying.css">
</head>

<body>
    <div class="fst--row">
        <div id="box1"></div>
    </div>
</body>

</html>

mouse away from elements to slowly revert back to their original positions [ CSS animation ]

1 Answers1