這是爲什麼CSS「過渡」值「無效屬性值」

我有以下的CSS（和相同的前綴版本）：這是爲什麼CSS「過渡」值「無效屬性值」

transition: -webkit-box-shadow 0.4s ease-out, 
      box-shadow   0.4s ease-out, 
      -webkit-transform 0.4s ease-out, 
      transform   0.4s ease-out, 
      opacity   0.4s ease-out, 
      -webkit-opacity 0.4s ease-out;

哪些瀏覽器給了我這麼多廢話：

enter image description here

將鼠標懸停在警告標誌上會出現一個工具提示：「無效的屬性值」。

我看不出差別來這（從CSS-Tricks）：

您可以逗號分隔值設置爲不同的性質做不同的轉換：
div { 
    transition: background 0.2s ease, 
       padding 0.8s linear; 
} 

請注意，我不能使用all，因爲我在JS中設置了.style屬性，我不想動畫（除非有一種方法可以從轉換中排除top和left） d仍然使用all，這會很好！）。

如何讓我的轉換再次工作？任何意見讚賞。

編輯：刪除前綴那些沒有解決它，在過渡仍然是「無效的屬性值」和它的前綴形式。

編輯2：我完全困惑。我已經將它簡化爲這仍然無效代碼：

-webkit-transition: transform 0.4s ease-out, opacity 0.4s ease-out; 
transition: transform 0.4s ease-out, opacity 0.4s ease-out;

編輯3：原來的解決方案只是將Chrome更新！如果可能的話，我仍然喜歡解決方法。

來源

2014-10-18 JJJollyjim

我的猜測是不喜歡的前綴。你可以嘗試'過渡：所有。4s緩解，頂部0s，左0s;' – 2014-10-18 21:49:35

要找出，嘗試刪除帶有前綴的屬性。 – 2014-10-18 21:59:55

@ZachSaucier不幸的是，頂部和左側仍然是這個動畫。如果我在轉換之前放置top並離開，也會發生同樣的情況 – JJJollyjim 2014-10-19 00:42:12

它不是無效的值屬性。

的spec說

如果列出的標識符之一是無法識別的屬性名稱或不是動畫屬性，實現必須仍然使用開始對動畫的性能轉換列表持續時間，延遲和定時功能在各自的索引中列出了'過渡時長'，'過渡時延'和 '過渡時間功能'。換句話說，不可識別的或不可識別的屬性必須保存在列表中以保持索引的匹配。

所以，即使您使用供應商前綴，它仍然會工作。

來源

2014-10-18 22:08:08 Oriol

我不確定這是答案而不是評論。 Chrome告訴我這是一個「無效價值財產」，這不僅僅是我的看法。 – JJJollyjim 2014-10-19 00:43:06

@ JJ56這是一個錯誤。 [spec]（http://dev.w3.org/csswg/css-transitions/#single-transition-property），[驗證器]（http://jigsaw.w3.org/css-validator/）和Firefox的開發人員工具說這是一個有效的價值。 – Oriol 2014-10-19 01:09:02

我希望這將是有用的：

.className { 
    transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); /* IE 9 */ 
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ 
}

來源

2015-04-19 16:36:52 sgazelle

你應該把前綴最前面的前綴放在最前面。見http://stackoverflow.com/questions/7080605/ordering-of-vendor-specific-css-declarations – 2015-04-22 08:19:49

這是爲什麼CSS「過渡」值「無效屬性值」

回答

相關問題