变换持续时间在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中工作

回答

相关问题