After the animation finishes, the CSS3 :hover effect ceases to function

Question

After the animation finishes, the CSS3 :hover effect ceases to function

There seems to be an issue with my DIV element. When hovering, the background color changes to blue. However, when a button is clicked, a class is added which animates the background color to green. After this animation, the hover effect no longer works and the background does not change to blue as expected.

Why is this happening?

View the code example here

HTML:

<div class="box"></div>
<button class="animate-btn">Animate</button>

CSS:

.box {
    background-color: red;
    width: 200px;
    height: 200px;
}
.box:hover {
    background-color: blue;
}

.trigger-bg-change {
    -webkit-animation: bg-change 1s ease 0 1 forwards;
    animation: bg-change 1s ease 0 1 forwards;  
}

@-webkit-keyframes bg-change {
    0% {background-color:red;}
    100% {background-color:green;}
}
@-keyframes bg-change {
    0% {background-color:red;}
    100% {background-color:green;}
}

JS:

$(function() {
        $('.animate-btn').on('click', function() {
            console.log('hey');
            $('.box').addClass('trigger-bg-change');
        });
});

css hover css-animations

Answer 1

Answer №1

Check out the DEMO here

If you want to customize the background change for .trigger-bg-change, you can use these CSS rules:

.trigger-bg-change {
    background-color: green;
    -webkit-animation: bg-change 1s ease 0 1 none;
    animation: bg-change 1s ease 0 1 none;  
}

To prevent the styles from being applied to the element after the animation, change the animation-fill-mode property from forwards to none. This will ensure that the rules for .box:hover are not overridden.

Answer 2

Check out the DEMO here

If you want to customize the background change for .trigger-bg-change, you can use these CSS rules:

.trigger-bg-change {
    background-color: green;
    -webkit-animation: bg-change 1s ease 0 1 none;
    animation: bg-change 1s ease 0 1 none;  
}

To prevent the styles from being applied to the element after the animation, change the animation-fill-mode property from forwards to none. This will ensure that the rules for .box:hover are not overridden.

Answer 3

Answer №2

VIEW DEMO 1 HERE (Includes JavaScript - See code below)

VIEW DEMO 2 HERE (No JavaScript Required - See code below)

JavaScript Solution

HTML

<div class="box-init"></div>
<button class="run-btn">Run Animation</button>

CSS

.box-init, .box-post {
    width: 200px;
    height: 200px;
    margin-bottom:10px;
}

.box-init{
  background-color: red;
}

.box-post{
  background-color: green;
}

.box-post:hover{
  background-color:blue;
}

.box-transition{
  transition-property: background-color; 
  transition-duration: 0.5s; 
  transition-timing-function: ease; 
  transition-delay: 0s;
}

.box-animation{
    /*Animation properties*/
    animation-name: bg-change;
    animation-duration: 0.5s; /*  <-- ANIMATION DURATION IS 0.5 SECONDS!!  */
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes bg-change {
    100% {background-color:green;}
}

JavaScript

const runBtn = document.querySelector('.run-btn');
const box = document.querySelector('.box-init');

runBtn.addEventListener('click', ()=>{
    box.classList.add("box-animation"); // animation duration is 0.5 seconds
  setTimeout(() => { // so after 0.6 seconds we will remove the animation
    box.classList.add("box-post");
    box.classList.remove("box-init");
    box.classList.remove("box-animation");
    box.classList.add("box-transition");
  }, 600); //0.6 seconds

});

Alternative Solution (No JavaScript Needed)

HTML

<div class="box"></div>

CSS

.box {
    background-color: red;
    width: 200px;
    height: 200px;
    margin-bottom:10px;

    /*Animation properties*/
    animation-name: bg-change;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes bg-change {
    0% {background-color:red;}
    100% {background-color:green;}
}

.box:hover{
    /*Animation properties*/
    animation-name: hover-animation;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes hover-animation {
    0% {background-color: green;}
    100% {background-color:blue;}
}

Answer 4

VIEW DEMO 1 HERE (Includes JavaScript - See code below)

VIEW DEMO 2 HERE (No JavaScript Required - See code below)

JavaScript Solution

HTML

<div class="box-init"></div>
<button class="run-btn">Run Animation</button>

CSS

.box-init, .box-post {
    width: 200px;
    height: 200px;
    margin-bottom:10px;
}

.box-init{
  background-color: red;
}

.box-post{
  background-color: green;
}

.box-post:hover{
  background-color:blue;
}

.box-transition{
  transition-property: background-color; 
  transition-duration: 0.5s; 
  transition-timing-function: ease; 
  transition-delay: 0s;
}

.box-animation{
    /*Animation properties*/
    animation-name: bg-change;
    animation-duration: 0.5s; /*  <-- ANIMATION DURATION IS 0.5 SECONDS!!  */
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes bg-change {
    100% {background-color:green;}
}

JavaScript

const runBtn = document.querySelector('.run-btn');
const box = document.querySelector('.box-init');

runBtn.addEventListener('click', ()=>{
    box.classList.add("box-animation"); // animation duration is 0.5 seconds
  setTimeout(() => { // so after 0.6 seconds we will remove the animation
    box.classList.add("box-post");
    box.classList.remove("box-init");
    box.classList.remove("box-animation");
    box.classList.add("box-transition");
  }, 600); //0.6 seconds

});

Alternative Solution (No JavaScript Needed)

HTML

<div class="box"></div>

CSS

.box {
    background-color: red;
    width: 200px;
    height: 200px;
    margin-bottom:10px;

    /*Animation properties*/
    animation-name: bg-change;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes bg-change {
    0% {background-color:red;}
    100% {background-color:green;}
}

.box:hover{
    /*Animation properties*/
    animation-name: hover-animation;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes hover-animation {
    0% {background-color: green;}
    100% {background-color:blue;}
}

After the animation finishes, the CSS3 :hover effect ceases to function

Answer №1

Answer №2

JavaScript Solution

Alternative Solution (No JavaScript Needed)

Similar questions

Display of certain special characters such as ">" may be affected when using UTF-8 encoding

Ways to showcase a website within an HTML document using a URL?

How to achieve a text border effect using inner glow technique

A guide on rotating loaders and inserting custom text within loaders using CSS

Submenu malfunctioning in Internet Explorer and Chrome, but functioning properly in Firefox and Opera

What is the best way to utilize Enquire.js for dynamically adding and removing CSS classes?

Position of fixed div set relative to its parent fixed div

Is there a way to manipulate a button's toggle state using Javascript as the page loads?

Tips for keeping a link in place on an image

The <img> tag needs to dynamically adjust its size based on the width of its parent element, while ensuring it does not exceed its original dimensions

Bootstrap 4's form validation feature is malfunctioning

Having difficulty toggling a <div> element with jQuery

Vue-Router functions only on specific routes

Enhanced Compatibility of HTML5/CSS3 Modal Box with Internet Explorer

Increase scrolling speed? - Background abruptly moves after scroll

Ways to turn off JavaScript when reaching a certain breakpoint, similar to a media query

Utilizing CSS Grid to create a modern layout design featuring a fullwidth header and footer,

"Why does adding a new span create space between it and the previous ones, and what can be done to prevent this from

Passing references between multiple components

A space designated for numerous receivers