[英]CSS3 keyframes animation only working in Firefox
我正在尝试使用此CodePen 。
这是我的问题: http : //jacobstone.co.uk/Livetesting/Vertical%20scroll%20text/index.html
目前,我只能使其在Firefox中运行,而不能在Chrome或Safari中运行。 我使用的前缀错误吗? 一直在尝试让它工作很久了!
body{
font:normal 40px/50px Arial, sans-serif;
color:#999;
}
.anim p{
height:50px;
float:left;
margin-right:0.3em;
}
.anim b{
float:left;
overflow:hidden;
position:relative;
height:50px;
}
.anim span1{
display:inline-block;
color:#e74c3c;
position:relative;
white-space:nowrap;
top:0;
left:0;
/*animation*/
-webkit-animation:move 5s;
-moz-animation:move 5s;
-ms-animation:move 5s;
-o-animation:move 5s;
animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
@keyframes move{
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
另外,您知道如何使所有文本垂直对齐吗?
您还需要在@keyframes
使用供应商特定的前缀。 它可以在Codepen中工作,因为它可以检查您使用的浏览器并自动添加前缀。 如果您检查了Codepen输出,则会注意到。
@-webkit-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-moz-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@-o-keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
@keyframes move {
0% { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}
Codepen有效,您的网站无效。
您还需要使用关键帧的前缀版本:
@-webkit-keyframes
完整参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.