@keyframe动画后，如何更改css属性? [英] How can I change a css property after it has been @keyframe animated?

问题描述

我正在使用@keyframe动画使某些按钮从不透明度:0变为不透明度:1.

I'm fading in some buttons with @keyframe animation from opacity: 0 to opacity: 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;
}

在:hover上，我想将不透明度更改为.5，但是在使用@keyframe为属性设置动画后，似乎无法更改它.

On :hover, I'd like to change the opacity to .5 but it appears that after a property is animated using @keyframe, it can't be changed.

简单的例子: http://jsfiddle.net/Lzcedmuq/3/

PS:在真实的网络应用中，我还在按比例缩放按钮，因此我需要的解决方法不仅仅是针对不透明性.我需要能够更改已设置动画的任何属性.我可以用JS骇客做到这一点，但我不想这么做.

PS: In the real web-app, I am also scaling the buttons in so the fix I need is more than just for opacity. I need to be able to change any property that has been animated. I can do it with JS hackery but I don't want to.

推荐答案

作为悬停状态的一部分禁用动画:

Disable the animation as part of the hover state:

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

一个问题是，动画将在悬停结束时重新开始.

One issue with this is that the animation will restart when the hover ends.

这篇关于@keyframe动画后，如何更改css属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！