保持CSS關鍵幀中的最後一個顏色變化

所以我用關鍵幀做了一個CSS動畫，其中元素的背景顏色和字體顏色發生了變化。問題是，當涉及到最後一幀時，顏色會重置爲默認值。我使用了animation-fill-mode，它有助於保持最終尺寸，但顏色仍然重置？這是代碼：保持CSS關鍵幀中的最後一個顏色變化

@keyframes anim{ 
    0% {background-color: #404880; color: #DCE0F7;} 
    90% {background-color: #747AA6; color: #242D5E;} 
    100% {font-size: 19px;} 
} 
.apply{ 
    font-size: 15px; 
    background-color: #404880; 
    border-radius: 5px; 
    border-style: none; 
    color: #DCE0F7; 
} 
.apply:hover{ 
    animation: anim; 
    animation-duration: .5s; 
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
    -moz-animation-fill-mode:forwards; /*FF 5+*/ 
    -o-animation-fill-mode:forwards; /*Not implemented yet*/ 
    -ms-animation-fill-mode:forwards; /*IE 10+*/ 
    animation-fill-mode:forwards; /*when the spec is finished*/ 
}

來源

2015-11-28 SirMaxime

當您設置animation-fill-mode: forwards，國家作爲最後一個關鍵幀將保留即使在動畫完成的元素。在這裏，您沒有在上一個關鍵幀（即100%幀）中爲background-color或color設置值，因此它會返回爲元素提供的原始值（默認或未佔用狀態）。如果您希望它保留90%幀的狀態，那麼屬性及其值也應該結轉到100%幀（即使沒有變化）。

與上述完全相同的原因，您不需要在設置中使用0%框架，因爲它具有與元素的默認狀態相同的值。只有在動畫開始時的狀態需要與默認狀態不同時，通常才需要0%框架。

@keyframes anim { 
 
    90% { 
 
    background-color: #747AA6; 
 
    color: #242D5E; 
 
    } 
 
    100% { 
 
    font-size: 19px; 
 
    background-color: #747AA6; 
 
    color: #242D5E;  
 
    } 
 
} 
 
.apply { 
 
    font-size: 15px; 
 
    background-color: #404880; 
 
    border-radius: 5px; 
 
    border-style: none; 
 
    color: #DCE0F7; 
 
} 
 
.apply:hover { 
 
    animation: anim; 
 
    animation-duration: .5s; 
 
    animation-fill-mode: forwards; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div class='apply'>Test content</div>

來源

2015-11-28 13:38:20 Harry

保持CSS關鍵幀中的最後一個顏色變化

回答

相關問題