使用當前背景顏色的CSS關鍵幀動畫

我想要將body標籤的背景顏色從其當前顏色動畫到指定顏色。使用當前背景顏色的CSS關鍵幀動畫

@-webkit-keyframes aboutColour /*--for webkit--*/{ 
    0% {background-color: X;} 
    100% {background-color: red;} 
}

所以上面的X就是它現在的任何東西。 CSS currentColor的背景顏色相當理想（背景顏色已經具有動畫效果，上面的動畫由另一個事件觸發）。

我的項目中包含JQuery，如果有幫助。

乾杯。托馬斯。

來源

2017-04-03 user1951962

爲什麼不將紅色設置爲'rgb（255,0,0）'，然後使用rgb設置所有其他colurs？ –

背景顏色已經具有動畫效果，所以不想設置第一種顏色，只需使用當前的顏色即可。 – user1951962

我認爲最好的辦法是用兩層，第一蒙山背景色X和第二與動畫，但使用也透明度：

HTML：

<div class="bg"> 
    <div class="foo"></div> // Animate this div 
</div>

CSS：

.bg { position:relative; background-color: X } 
.foo { width:100%; height:100%; -webkit-animation: aboutColor [...] ;} 

@-webkit-keyframes aboutColour /*--for webkit--*/{ 
    0% {background-color: transparent; opacity: 0} 
    100% {background-color: red; opacity: 1} 
}

來源

2017-04-03 20:42:59 Diego

是的，這是一個好主意。我唯一的擔心是稀釋顏色，但我無法想象如果你的解決方案會這樣做，猜測只有一種方法可以找出... – user1951962

問題是你不能在CSS中使用「當前顏色」，你有在動畫中定義總是初始狀態和完成狀態：（我在想更多一點，也許內在的影子可以做到這一點，但我現在不能測試它，就像...... @ webkit-keyframes aboutColour {0} {box-shadow：none} 100％{box-shadow：0px 0px 0px 999px red inset} } – Diego

你可以使用currentcolor，因爲我試過了，問題在於它會給你顏色而不是背景顏色我最終使用JQuery顏色，因爲我在顏色和交互性方面做了很多，但我認爲你的冷杉t解決方案可能是解決這個問題的最佳CSS解決方案，因此將標記出來。謝謝你的幫助。 – user1951962

使用當前背景顏色的CSS關鍵幀動畫

回答

相關問題