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); } }

Answer 1

伙计，这不是你处理 css 关键帧动画的方式。您将语法与转换混淆了。

使用关键帧动画：

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

有过渡：

.footerLink{
    padding:20px;
    background:#000;
    color:#fff;
}
.footerLink:before{
    content:'ABC';
    margin-right:15px;
    transform: scale(1.5) rotate(0deg);
    transition: .5s;
}
.footerLink:before:hover {
    transform: scale(1.5) rotate(360deg);
}