css - CSS ローテーションが機能しない

Question

私はいくつかのCSSアニメーションをテストしていますが、この要素を取得できません:回転する前に、助けはありますか?

http://jsfiddle.net/gespinha/hZjkp/5/

CSS

.footerLink{
    padding:20px;
    background:#000;
    color:#fff;
}
.footerLink:before{
    content:'ABC';
    margin-right:15px;
    -webkit-animation: footerHoverOff .5s ease both;
    -moz-animation: footerHoverOff .5s ease both;
    animation: footerHoverOff .5s ease both;
}
.footerLink:hover:before{
    -webkit-animation: footerHoverOn .5s ease both;
    -moz-animation: footerHoverOn .5s ease both;
    animation: footerHoverOn .5s ease both;
}
@-webkit-keyframes footerHoverOn{ to { -webkit-transform: scale(1.5) rotate(360deg); } }
@-moz-keyframes footerHoverOn{ to { -moz-transform: scale(1.5) rotate(360deg); } }
@keyframes footerHoverOn{ to { transform: scale(1.5) rotate(360deg); } }
@-webkit-keyframes footerHoverOff{ from { -webkit-transform: scale(1.5) rotate(360deg); } }
@-moz-keyframes footerHoverOff{ from { -moz-transform: scale(1.5) rotate(360deg); } }
@keyframes footerHoverOff{ from { transform: scale(1.5) rotate(360deg); } }