變換持續時間在Safari中不起作用，但在Chrome中工作

.cl-effect-10 a::before { 
    position: absolute; 
    display: inline-block; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    height: 40px; 
    width: 10px; 
    background:#00BFFF; 
    color: #ddd; 
    content: attr(data-hover); 
    -webkit-transition-property: width; 
    -webkit-transition-duration: 2s; 
    -webkit-transform: skew(-45deg, 0); 
    -moz-transform: skew(-45deg, 0); 
    -ms-transform: skew(-45deg, 0); 
    transform: skew(-45deg, 0); 
} 
.cl-effect-10 a:hover::before,.cl-effect-10 a:focus::before { 
    width: 100%; 
}

變換持續時間在Safari中不起作用，但在Chrome中工作。我想問你任何形式的幫助。變換持續時間在Safari中不起作用，但在Chrome中工作

在此先感謝。

來源

2016-04-27 彭夾子

您正在測試什麼版本的Safari？你怎麼知道它只是沒有被應用的'transition-duration'屬性而不是所有的'transition'屬性？ – Shaggy

我的Safair版本是5.1.7，你是對的，這是一個版本問題。打你的提前！ –

此前6.1版本，Safari瀏覽器沒有對::before和::after僞元素（source）支持transition所以，如果你在一箇舊版本相比，這將佔據你的問題測試。

順便提一句，使用您提問中提供的CSS，您的轉換僅適用於Chrome瀏覽器& Safari，因爲您僅使用-webkit-屬性的前綴版本。幾乎所有支持CSS轉換的瀏覽器（有一個例外）現在都支持它們，並且已經有一段時間了，而不需要任何前綴。但是，如果您需要爲舊瀏覽器提供支持，請使用caniuse.com的表格來確定可能需要使用哪些前綴。

來源

2016-04-27 10:04:26 Shaggy

變換持續時間在Safari中不起作用，但在Chrome中工作

回答

相關問題