CSS3动画后:hover不起作用

Question

我有一个DIV，当鼠标悬停时，背景色会变成蓝色。

按钮点击后添加类，使背景色动画变为绿色。 但是现在: hover不起作用（bgcolor不会变为蓝色）。

为什么？

http://jsfiddle.net/EstSiim/me7t055c/

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');
        });
});

- EstSiim

Answer 1

演示

你可以使用以下CSS规则来代替.trigger-bg-change：

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

通过将animation-fill-mode属性从forwards更改为none，动画在执行后不会将样式应用于元素，因此.box:hover的规则不会被覆盖。

- chiwangc

Answer 2

演示 1（使用 JavaScript - 请参见下面的代码）

演示 2（不使用 JavaScript - 请参见下面的代码）

JavaScript 解决方案：

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

});

替代方案（不使用JavaScript）：

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;}
}

- August Jelemson