Как изменить свойство css после анимации @keyframe?

Question

Я замирание в некоторых кнопках с @keyframe анимации с непрозрачности: 0 непрозрачности: 1.

div{ 
    opacity: 1; 
    animation: fadeIn 1s forwards;  
    -webkit-animation: fadeIn 1s forwards; 
} 

@-webkit-keyframes fadeIn { 
    0%{ 
     opacity: 0; 
    }100%{ 
     opacity: 1; 
    } 
} 

@keyframes fadeIn { 
    0%{ 
     opacity: 0; 
    }100%{ 
     opacity: 1; 
    } 
} 

div:hover{ 
    opacity: .5 !important; /* THIS DOES NOT HAPPEN BECAUSE THE OPACITY WAS ANIMATED */ 
    color: red; 
} 

На: парить, я хотел бы изменить непрозрачность .5, но кажется, что после того, свойство анимируется с помощью @keyframe, его нельзя изменить.

Простой пример: http://jsfiddle.net/Lzcedmuq/3/

---

PS: В реальном веб-приложение, я также масштабирование кнопок так затруднительное мне нужно больше, чем просто для непрозрачности. Мне нужно изменить любое свойство, которое было анимировано. Я могу сделать это с JS-хакером, но я не хочу этого делать.

Answer 1

Отключить анимацию как часть состояния парения:

div:hover{ 
    opacity: .5; 
    -webkit-animation: none; 
    animation: none; 
    color: red; 
} 

Одна из проблем в том, что анимация будет перезапущен, когда концы при наведении курсора мыши.

Answer 2

Это устранило проблему

opacity: 0.5 !important; 

Я не могу ответить, почему браузер не позволяет вносить изменения в анимационных стилей, но он должен иметь более высокий приоритет, то любые новые указанные стили ... так с что вы можете использовать! важно, чтобы заставить этот стиль первоочередной задачей.

Demo