我正在测试一些 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); } }
最佳答案
伙计,这不是你处理 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);
}
关于CSS 旋转不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18667849/