CODEWITHSUNDEEP
htmlcsscss-animations
Wargog
Wargog

Reputation: 428

CSS after mouse is moved from hover

In CSS, the hover event is triggering as it should. However, when it is an animation, when the mouse is moved back off the object (in this case a button), it returns to its normal state without an animation back. This results in it looking really jumping and going against the theme I'm shooting for. So, I need an event that is triggered after the hover event, like what I thought would work: .button-default:hover:after {}, but didn't work the way I expected. My CSS below:

.button-default {
    width: 40vw;
    height: 5vh;
    color: white;
    background: transparent;
    border: solid 2px;
    border-radius: 5px;
    border-color: white;
}

.button-default:hover {
    animation-name: animate-button;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.button-default:hover:after {
    animation-name: normalize-button;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes normalize-button {
    from {
        color: blue;
        background: white;
        border-color: blue;
    }
    to {
        width: 40vw;
        height: 5vh;
        color: white;
        background: transparent;
        border: solid 2px;
        border-radius: 5px;
        border-color: white;
    }
}

@keyframes animate-button {
    from {
        .button-default;
    }
    to {
        color: blue;
        background: white;
        border-color: blue;
    }
}

body {
    font-family: 'Oswald', sans-serif;
    /*background: url('../images/novam.png') no-repeat center;*/
    background: black;
    background-size: cover;
}

Upvotes: 2

Views: 240

Answers (1)

Mg Thar
Mg Thar

Reputation: 1102

As your animation only need two stages, you can just use css transition instead of animation to get that effect. And FYI, after is pseudo element. It is not event.

.button-default {
    width: 40vw;
    height: 5vh;
    color: white;
    background: transparent;
    border: solid 2px;
    border-radius: 5px;
    border-color: white;
     -webkit-transition: all 2s ease;
    transition: all 2s ease;
     -moz-transition: all 2s ease; 
}

.button-default:hover {
        color: blue;
    background: white;
    border-color: blue;
}

Fiddle here

Upvotes: 2

Related Questions