webkit transform not work in safari - animation

Question

Webkit animation works fine in firefox, chrome, IE and opera but not correctly in safari. webkit animation not work fine in safari. why?
.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

You need to add -webkit-transform to the transition property list:
.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);
}
As you seem to want to animate all the properties you change, you could simply specify all for the transition and -webkit-transition properties. For further brevity, use the shorthand syntax to specify all the transition properties at once:
.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;
}
Your original code worked in Firefox and Chrome because they support the unprefixed transform property. Incidentally, you don't need to redefine property values in the :hover state which don't change (you'll notice I've removed margin, text-align, width and height from the :hover block).
JSFiddle