應該：在CSS動畫完成後懸停僞狀態樣式更改工作

Question

在CSS動畫完成對元素運行後，應該在僞狀態（如:hover）上指定的樣式更改是否應該工作？

編輯：也許更有針對性，我應該問：爲什麼在動畫上應用「轉發」會阻止重寫更具體的樣式更改？

編輯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>

我無法找到在規範有關信息，沒有之一：http://www.w3.org/TR/css3-animations/

任何人都知道，如果a）本應有可能嗎？ b）一旦動畫結束，如何讓懸浮狀態在元素上工作？

Answer 1

• 一）

關於它爲什麼會發生，我無法說出肯定的。但它顯然與您設置爲forwards的animation-fill-mode屬性有關。也就是說，根據定義，設置元素的視覺風格是動畫的最後一個關鍵幀：

轉發
動畫結束之後（如通過其動畫迭代計數確定），動畫將應用動畫結束時的屬性值。

MDN's definition是一個比較明確的：

前鋒
目標將保留在執行過程中遇到的最後一個關鍵幀設置的計算值。遇到的最後一個關鍵取決於動畫方向和價值動畫迭代-數：

但我不知道爲什麼它不允許:hover狀態來覆蓋樣式。

• B）

現在，如何使它工作，你可以從動畫中刪除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>

Answer 2

其實我不是很瞭解你的問題，也許你需要這樣的效果？ 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; 
} 

然而，與這些代碼，當你鼠標移出文本，動畫將重播。

Answer 3

從CSS Animations Working Draft

CSS動畫影響計算的屬性值引用。在執行動畫期間，屬性的計算值由動畫控制。這將覆蓋常規樣式系統中指定的值。 動畫覆蓋所有常規規則，但被重要規則重寫。

和位進一步向下（Animation Duration）：

[...]和填充轉發將保留在100％的關鍵幀中指定的值，即使動畫是瞬間的動畫。此外，動畫事件仍然被解僱。

當您設置動畫的background無法在默認情況下被覆蓋（除！important規則）。如果你不想使用!important你應該去LcSalazar's answer。 （如規格說明目前只有Firefox的反應[2014年11月6日]）

@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>