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);
}
答案 0 :(得分：0)
您需要将 beans = ['first': bean1, 'second': bean2]
添加到-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);
}
和all属性指定transition即可。为了更加简洁，请使用简写语法一次指定所有过渡属性：
-webkit-transition您的原始代码在Firefox和Chrome中有效，因为它们支持未加前缀的.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;
}
属性。顺便提一下，您无需重新定义transform状态中未更改的属性值（您会注意到我已删除:hover，margin，text-align和来自width区块的height。