如何將CSS轉換僅應用於轉換屬性

我目前得到的transform: rotate(45deg)是使用複選框:checked值應用的，我正在尋找一種解決方案，以便CSS轉換僅適用於轉換值。現在我已經將它設置爲：transition: all 1s ease。我不希望它適用於全部雖然，只是變換。現在它正在將轉換應用到我想要擺脫的color:更改。如何將CSS轉換僅應用於轉換屬性

我覺得這應該很容易找到答案，但事實證明比我想象的要困難。如果您有任何問題，請告訴我。謝謝。

這是我的code pen。有問題的代碼是CSS行25-28。

來源

2014-01-24 Matthew Beckman

使用'transform'到位all'的'但是，工作以及前綴，這是更煩人一點。 http://bit.ly/1blrJOR – Markasoftware

@Markasoftware我試過你的建議，但它完全消除了過渡。 http://codepen.io/mtthwbckmn/pen/ByFnj –

@MattBeckham哈哈，這是因爲Chrome支持沒有前綴的'transition'，但它需要'transform'的前綴，如果它沒有前綴，它支持'transition'。但是，你的'transition' CSS僅僅用於'transforms'，而不用'-webkit'前綴，所以...是的 – Markasoftware

您可以使用transition: transform 1s;

也就是說簡寫：

transition-property: transform; 
transition-duration: 1s;

爲前綴，你需要：

-webkit-transition: -webkit-transform 1s; 
/* etc, for each possibility */

來源

2014-01-24 02:34:53 m59

我已經做了這些改變，嘗試了速記和慢速CSS，但它完全消除了轉換。 http://codepen.io/mtthwbckmn/pen/ByFnj –

@MattBeckman什麼瀏覽器？ – m59

@MattBeckman - 我正在使用chrome，並且您的鏈接和動畫一起工作正常。 – Night

如何將CSS轉換僅應用於轉換屬性

回答

相關問題