Должно: навевать работу изменения стиля псевдого состояния после завершения анимации CSS

Должны ли изменения стиля, указанные в псевдо-состоянии, такие как :hover работать после того, как анимация CSS завершила работу над элементом?

EDIT: возможно, более уместно, я должен спросить: почему применение "форвардов" в анимации предотвращает переопределение более определенного стиля?

РЕДАКТИРОВАТЬ 2: Оказывается, это на самом деле проблема с перекрестным браузером. Например. Chrome (я запускал версию 38.0.2125.111) ведет себя некорректно, но Firefox обрабатывает его по спецификациям.

Короче говоря: согласно спецификациям (как указано в chrona ниже) добавление !important к переопределению должно отображать стиль. Однако в настоящее время это правильно обрабатывает только Firefox.

Вот сокращение:

@keyframes go {
  0% {
    background: green;
  }
  100% {
    background: pink;
  }
}

@-webkit-keyframes go {
  0% {
    background: green;
  }
  100% {
    background: pink;
  }
}

.box {
  animation: go 3s forwards;
  -webkit-animation: go 3s forwards;
  
}

.box:hover {
    background: orange!important;
  cursor: pointer;
 }

<div class="box">Hover states don't work after animation</div>

Ответы

Ответ 1

О том, почему это происходит, я не могу сказать точно. Но это, очевидно, связано с свойством animation-fill-mode, которое вы устанавливаете как forwards. Это, по определению, устанавливает визуальный стиль элемента как последний ключевой кадр анимации:

форварды
После окончания анимации (как определено его числом анимации-итерации) анимация будет применять значения свойств за время окончания анимации.

Определение MDN немного более понятно:

форварды
Цель будет сохранять вычисленные значения, установленные последним ключевым кадром, встречающимся во время выполнения. Последний ключевой кадр зависит от значения направления анимации и анимации-итерации-count:

Но я не знаю, почему он не позволяет состоянию :hover переопределять стили.

Теперь, о том, как заставить его работать, вы можете удалить свойство forwards из анимации. В этом случае вам нужно будет отменить анимацию, поэтому исходное состояние элемента (когда анимация заканчивается и удаляет визуальный эффект) - это цвет, который вы хотите исправить:

@keyframes go {
  0% {
    background: pink;
  }
  100% {
    background: green;
  }
}

@-webkit-keyframes go {
  0% {
    background: pink;
  }
  100% {
    background: green;
  }
}

.box {
  animation: go 2s;
  -webkit-animation: go 2s;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
  background: pink;
}

.box:hover {
    background: orange;
  cursor: pointer;
 }

<div class="box">Hover states don't work after animation</div>

Ответ 2

Цитируется из Работа с CSS-анимациями

Анимация CSS влияет на значения вычисляемых свойств. Во время выполнения анимации вычисленное значение для свойства контролируется анимацией. Это переопределяет значение, указанное в обычной системе стилизации. Анимация отменяет все обычные правила, но переопределяется важными правилами.

и немного дальше вниз (Продолжительность анимации):

[...], а анимация, заполняющая вперед, сохранит значение, указанное на 100% ключевом кадре, даже если анимация была мгновенной. Кроме того, анимационные события все еще запущены.

Как вы анимируете background, по умолчанию он не может быть переопределен (за исключением важных правил). Если вы не хотите использовать !important, вы должны пойти ответ LcSalazar. (В настоящее время только Firefox реагирует, как описано в спецификациях [6 ноября 2014])

@keyframes go {
  0% {
    background: green;
  }
  100% {
    background: pink;
  }
}

@-webkit-keyframes go {
  0% {
    background: green;
  }
  100% {
    background: pink;
  }
}

.box {
  animation: go 3s forwards;
  -webkit-animation: go 3s forwards;
  
}

.box:hover {
    background: orange !important;
  cursor: pointer;
 }

<div class="box">Hover states don't work after animation</div>

Ответ 3

На самом деле я не совсем понимаю ваш вопрос, возможно, вам нужны такие эффекты? http://jsfiddle.net/abruzzi/5td8w6jx/

@keyframes go {
    0% {
        background: green;
    }
    100% {
        background: pink;
    }
}
@-webkit-keyframes go {
    0% {
        background: green;
    }
    100% {
        background: pink;
    }
}


.box {
    animation: go 3s forwards;
    -webkit-animation: go 3s forwards;
}
.box:hover {
    -webkit-animation: none;
    background: orange;
    cursor: pointer;
}

Однако, с этими кодами, когда вы просматриваете текст, анимация будет воспроизводиться.