css3：动画后悬停不起作用

Posted 2023-03-06

【中文标题】css3：动画后悬停不起作用

【英文标题】：css3 :hover wont work after animation

【发布时间】：2014-10-05 06:50:41

【问题描述】：

我有一个 DIV，它在 :hover 时将 bgcolor 更改为蓝色。 按钮单击添加了将 bgcolor 设置为绿色的类。但是现在 :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');
        );
);

【参考方案1】：

DEMO

您可以对 .trigger-bg-change 使用以下 CSS 规则：

.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 的规则不会被覆盖。

【参考方案2】：

DEMO 1 (With javascript - See code below)DEMO 2 (Without JavaScript - See code below)

JavaScript 解决方案：

<b>HTML</b>

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

<b>CSS</b>

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

<b>JavaScript</b>

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）：

<b>HTML</b>

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

<b>CSS</b>

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