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。为了更简洁，使用简写语法一次性指定所有的转换属性：

.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 状态下重新定义不变的属性值（您会注意到我已经从 @987654335 中删除了 margin、text-align、width 和 height @块）。

JSFiddle