css - Transform-duration 在 Safari 中不起作用，但在 Chrome 中起作用

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%;
}

Transform-duration 在 Safari 中不起作用，但在 Chrome 中起作用。 我想请您提供任何帮助。

提前致谢。

Answer 1

在版本 6.1 之前，Safari 不支持 ::before 和 ::after 伪元素上的 transition ( source )因此，如果您在比该版本更旧的版本中进行测试，那将解决您的问题。

顺便说一句，使用您问题中提供的 CSS，您的转换将仅在 Chrome 和 Safari 中有效，因为您只使用了属性的 -webkit- 前缀版本。几乎所有支持 CSS 转换的浏览器(除了一个异常(exception))现在都支持它们，并且已经有一段时间了，而且不需要任何前缀。但是，如果您需要为旧版浏览器提供支持，请使用 caniuse.com的表以确定您可能需要使用哪些前缀。