我正在尝试CSS3 @keyframes动画,但没有设法使其在Chrome中运行(目前我有Chrome 38)
代码非常简单:
的HTML
<div id="block">moving text</div>
的CSS
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
#block {
position:absolute;
animation: mymove 2s infinite;
}
这是带有相同代码的小提琴。
对我来说,文本在Chrome 38中不会移动,但在Firefox 30和IE 11上效果很好。
我尝试使用,@-webkit-keyframes
但是文本在Chrome中都不会移动。
您需要同时在style属性和keyframes函数上使用供应商前缀
@-webkit-keyframes mymove /* <--- here */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
#block {
position:absolute;
-webkit-animation: mymove 2s infinite;/* <--- and here */
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句