保持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关键帧中的最后一个颜色变化

回答

相关问题