Flou + décalage suite à un rotate.

Bonjour à tous,

J'essaie de reproduire l'effet sur le site slate.fr (dans leur menu une flèche va vers le bas et vers la droite lorsqu'elle s'ouvre/ferme) sauf que moi ma flèche tourne correctement mais durant l'animation la flèche est floue et une fois l'animation finie un léger mouvement sec sur la gauche décale l'image. Voici le code utilité :
CSS :

.arrow-open-close{
	position:absolute !important;
	right:10px;
}
.arrow-open-close:before{
	width:15px; height:15px;
	vertical-align:middle;
	display:block;
	content: "\f04b";
}
.test{
	transition: all 300ms ease-out 0s;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    white-space: nowrap; 
}

JS:

jQuery("#"+this.id+" a span").addClass('test');