webkit 转换在 safari 中不起作用

Question

Webkit 动画在 firefox、chrome、IE 和 opera 中运行良好，但在 safari 中运行不正常。 webkit 动画在 safari 中无法正常工作。为什么？

.t-ads {
margin: 10px auto;
text-align:center;
width: 125px;
height: 125px;
background: #41515a;
border-radius: 10px;
font-size:10px;color:#FFFFFF;
transition-property: width, height, transform, background,color, font-size, opacity;
transition-duration: 1s, 1s, 1s, 1s, 1s, 1s,1s;
}
.t-ads:hover {
margin: 10px auto;
text-align:center;
width: 125px;
height: 125px;
background: #3399FF;
font-size:20px;
color:#000000;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

Answer 1

您需要将 -webkit-transform 添加到 transition 属性列表中：

.t-ads {
    margin: 10px auto;
    text-align: center;
    width: 125px;
    height: 125px;
    background: #41515a;
    border-radius: 10px;
    font-size: 10px;
    color:#FFFFFF;

    -webkit-transition-property: width, height, -webkit-transform, background, color, font-size, opacity;
    transition-property: width, height, -webkit-transform, transform, background, color, font-size, opacity;
    -webkit-transition-duration: 1s; /* Only one value needed if all are the same */
    transition-duration: 1s;
}
.t-ads:hover {
    background: #3399FF;
    font-size: 20px;
    color: #000000;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

由于您似乎想要为您更改的所有属性设置动画，您可以简单地为 transition 和 -webkit-transition 属性指定 all。为了进一步简洁，使用 shorthand 语法一次指定所有转换属性：

.t-ads {
    margin: 10px auto;
    text-align: center;
    width: 125px;
    height: 125px;
    background: #41515a;
    border-radius: 10px;
    font-size: 10px;
    color:#FFFFFF;

    -webkit-transition: all 1s;
    -transition: all 1s;
}

您的原始代码在 Firefox 和 Chrome 中有效，因为它们支持不带前缀的 transform 属性。顺便说一句，您不需要重新定义 :hover 状态下的属性值，这些值不会改变（您会注意到我已经删除了 margin、text-align、width 和 height 来自 :hover 块）。

JSFiddle

webkit 转换在 safari 中不起作用

webkit transform not work in safari

animation

transform