Question

.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中有效。我想请你提供任何帮助。

提前致谢。

Answer 1

在6.1版之前，Safari不支持transition上的::before和::after伪元素（source），因此，如果您正在测试中旧版本，这将解决您的问题。

顺便说一句，使用您问题中提供的CSS，您的转换仅适用于Chrome＆amp; Safari，因为您只使用-webkit-前缀版本的属性。几乎所有支持CSS转换的浏览器（有一个例外）现在支持它们，并且有一段时间，不需要任何前缀。但是，如果您需要为旧版浏览器提供支持，请使用caniuse.com表来确定您可能需要使用哪些前缀。

转换持续时间在Safari中无效，但在Chrome中有效

1 个答案: