CSS3 动画仅适用于 webkit？ [关闭]

Posted 2023-03-06

【中文标题】CSS3 动画仅适用于 webkit？ [关闭]

【英文标题】：CSS3 Animation only working with webkit? [closed]

【发布时间】：2012-11-09 04:45:42

【问题描述】：

我正在我的网站上制作带有拼图的 CSS3 动画。我正在使用的代码如下。出于某种原因，动画仅适用于 Safari 和 Chrome。如何让动画与 Firefox 和 Opera 一起使用？谢谢您的反馈！

img#animation

length:150px;
width:150px;
position:relative;
animation:puzzle 4s
-moz-animation:puzzle 4s;
-webkit-animation:puzzle 4s;
-o-animation:puzzle 4s;

@keyframes puzzle

from left:-400px; top:0px;
to left:41px; top:0px;

@-moz-keyframes puzzle

from left:-400px; top:0px;
to left:41px; top:0px;

@-webkit-keyframes puzzle

from left:-400px; top:0px;
to left:40.5px; top:0px;

@-o-keyframes puzzle

from left:-400px; top:0px;
to left:41px; top:0px;

【问题讨论】：

length:150px; 是什么？

Jc，如果 Zoltan 的回答对您有用，请接受它，以便将其标记为已关闭

【参考方案1】：

您在这一行中缺少一个分号

animation:puzzle 4s;
                ---^

添加它，它会起作用 - DEMO

【讨论】：

谢谢！效果很好！