CSS旋转不起作用答案

【问题标题】：CSS rotation not workingCSS旋转不起作用
【发布时间】：2013-09-06 23:03:52
【问题描述】：

我正在测试一些 css 动画，但无法获取这些元素：在旋转之前，有什么帮助吗？

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

【问题讨论】：

重复stackoverflow.com/questions/7809872/…
它不是重复的，如果你看到有问题的代码，你会注意到我的方法是在关键帧上而不是在简单的 css 动画上。
尝试将display:inline-block; 添加到.footerLink:before 选择器。
如果 simple 动画不起作用，为什么关键帧动画会起作用？
我已经得到了上面的答案，你应该阅读它以了解这两个问题之间的区别，因为它不是你所说的重复的帖子。

标签： css

【解决方案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);
}

【讨论】：

我在哪里混淆了语法？
关键帧必须有'from'和'to'，或者'0%'和'100%'。如果您没有起点和终点，它将被忽略。当你想在默认情况下定义一个起点并在 :hover 上定义一个终点时，你应该使用过渡而不是动画。