Probleme webkit transform et scale

bonjour
j'ai un probleme avec la foction scale, voici ma fonction qui me permet de faire une rotation suivant l'heure de la nuit.

pRotate = parseInt(((time_to_change_wall - nighthour)/ DurationOfNight)*180);
document.getElementById("sunnray").style.webkitTransform = "rotate("+pRotate+"deg)";

mais quand je veux lui mettre en css

#sunray {
	background:url('../../Images/Weather/sun/sunray.png') center no-repeat;
	background-size: 320px 320px;
    position: absolute;
    top: -60px;
	left: -160px;
    width: 320px;
    height: 320px;
	margin : auto 0;
    z-index: 12;
	display: none;
	-webkit-animation: sunray_anim 10s linear infinite normal;
	-webkit-transform-origin: 50% 50%;
}
@-webkit-keyframes sunray_anim {
		0% {
		   opacity : 0;
		   -webkit-transform : scale(0.5, 0.5);
			}
		50% {
		   opacity : 0.6;
		   -webkit-transform : scale(1.0, 1.0);
			}
		90% {
		   opacity : .0;
			}
		100% {
		   opacity : 0;
		   -webkit-transform : scale(1.5, 1.5);
			}
}

mon image reste figé est ne tourne plus.Je pense que le probleme viens du faite d'avoir 2 webkit-transform.
donc comment faire pour que mon image tourne bien?
merci

Bonjour,

tu as testé en retirant le transform dans le css ? ( pour voir si ça vient bien de là ! ).

oui quand je retire le transform du css sa marche
quand je met sa nikel

@-webkit-keyframes sunray_anim {
		0% {
		   opacity : 0;
		
			}
		50% {
		   opacity : 0.6;
			}
		90% {
		   opacity : .0;
			}
		100% {
		   opacity : 0;
		  
			}
}