转换持续时间不适用于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。我想请您提供任何帮助。

提前致谢。