如何在@keyframe動畫之後更改CSS屬性？

我衰落的某些按鈕與透明度@keyframe動畫：0不透明度：1如何在@keyframe動畫之後更改CSS屬性？

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

在：徘徊，我想的不透明度更改爲0.5，但它似乎是一個後屬性使用@keyframe動畫，它不能被改變。

簡單的例子： http://jsfiddle.net/Lzcedmuq/3/

PS：在真正的web應用程序，我也縮放按鈕，所以我需要修復不僅僅是不透明度等等。我需要能夠改變任何已經動畫的屬性。我可以用JS hackery來做，但我不想。

來源

2015-04-17 narrowdesign

你應該告訴我們關於你已經測試過的瀏覽器 – Vishwanath

在Chrome 42和Safari OSX上測試過。確認它在FF上工作。 – narrowdesign

禁用動畫作爲懸停狀態的一部分：

本

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

一個問題是，動畫將重新啓動時，懸停結束。

來源

2015-04-17 17:14:00 zzzzBov

1+聰明..不錯的.. .. - http://jsfiddle.net/me5zdu2s/ –

這解決了這一問題

opacity: 0.5 !important;

我不能回答爲什麼瀏覽器不允許更改動畫的風格，但它必須有一個更高的優先級則任何新規定的樣式......所以用記住，您可以使用！important來強制該風格爲重中之重。

Demo

來源

2015-04-17 17:05:48 floor

在Chrome 42中不適合我。什麼瀏覽器？我正在更新jsfiddle鏈接來包含它，因爲它覺得它應該工作。 – narrowdesign

我正在使用火狐 – floor

嗯所以它不適用於鉻，我現在正在測試其他瀏覽器，我會回覆你 – floor

如何在@keyframe動畫之後更改CSS屬性？

回答

相關問題