CSS动画保留原始属性：如何无需指定原背景色实现过渡？

你只需要对现有的动画代码做一个小调整，就能让动画自动过渡到元素自身的原始背景色，不用硬编码任何预设的背景值，完美实现复用。

核心思路 #

CSS动画的to（或100%）关键帧如果不指定具体样式，浏览器会自动使用元素应用动画前的原始样式作为动画的结束状态。利用这个特性，我们只需要保留动画起始的高亮色，去掉结束时的固定背景色定义即可。

修改后的完整代码 #

@high-light-white: #ffffff; 
@high-light-yellow: #ede5d0; 
@high-light-default: #dce1ea; 
@high-light-duration: 10s; 

.highlight-comment { 
  -webkit-animation-name: highlight; /* Safari 4.0 - 8.0 */ 
  -webkit-animation-duration: @high-light-duration; /* Safari 4.0 - 8.0 */ 
  animation-name: highlight; 
  animation-duration: @high-light-duration; 
} 

@keyframes highlight { 
  from { background-color: @high-light-yellow; } 
  /* 移除硬编码的to状态，让浏览器自动使用元素原始背景色作为结束状态 */
}

为什么这样有效？ #

当你只定义from（即0%进度）的关键帧时，浏览器会自动将元素在应用动画前的background-color值作为to（即100%进度）的状态。不管你把这个类应用到背景色为白色、浅灰还是其他颜色的元素上，动画都会平滑地从黄色过渡到元素自身的原始背景色，完全无需额外配置。

额外提示 #

如果希望动画结束后保持结束状态（而不是立刻跳回原始样式），可以给.highlight-comment添加animation-fill-mode: forwards，但根据你的需求，默认的animation-fill-mode: none就足够让元素回到原始背景色了。

内容的提问来源于stack exchange，提问作者Felipe Wagner