css3: hover не будет работать после анимации

У меня есть DIV, который меняет bgcolor на синий при: hover. Щелчок кнопки добавляет класс, который анимирует 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');
        });
});

css css-animations hover
person EstSiim    schedule 12.08.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

ДЕМО

Вместо этого вы можете использовать следующие правила 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 не будут переопределены.

person chiwangc    schedule 12.08.2014

arrow_upward
0
arrow_downward

ДЕМО 1 (с JavaScript — см. код ниже)

DEMO 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;}
}
person August Jelemson    schedule 11.12.2019