CSS 动画 Firefox - Noob 矫枉过正？-6ren

CSS 动画 Firefox - Noob 矫枉过正？

转载作者：行者123 更新时间：2023-11-28 12:14:44

已在所有 SO 帖子中努力搜索，但仍找不到答案。我的动画很长，很抱歉发了这么长的帖子!

它在 Chrome 上运行良好，但在 Firefox 30.0 上运行不正常，我不明白为什么。

我真的需要这么多代码吗，还是这个菜鸟太过分了？

@-webkit-keyframes rocket {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-o-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg); }

10% { 
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-o-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg); }

20% { 

-webkit-transform: translate(-3px, 0px) rotate(1deg);
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-o-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg); }

30% { 
-webkit-transform: translate(0px, 2px) rotate(0deg);
-moz-transform: translate(0px, 2px) rotate(0deg);
-ms-transform: ttranslate(0px, 2px) rotate(0deg);
-o-transform: translate(0px, 2px) rotate(0deg);
transform: translate(0px, 2px) rotate(0deg); }

40% { 
-webkit-transform: translate(1px, -1px) rotate(1deg);
-moz-transform: translate(1px, -1px) rotate(1deg);
-ms-transform: translate(1px, -1px) rotate(1deg);
-o-transform: translate(1px, -1px) rotate(1deg);
transform: translate(1px, -1px) rotate(1deg); }

50% { 
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-o-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg); }

60% { 
-webkit-transform: translate(-3px, 1px) rotate(0deg);
-moz-transform: translate(-3px, 1px) rotate(0deg);
-ms-transform: translate(-3px, 1px) rotate(0deg);
-o-transform: translate(-3px, 1px) rotate(0deg);
transform: translate(-3px, 1px) rotate(0deg); }
70% {
-webkit-transform: translate(2px, 1px) rotate(-1deg); 
-moz-transform: translate(2px, 1px) rotate(-1deg); 
-ms-transform: translate(2px, 1px) rotate(-1deg); 
-o-transform: translate(2px, 1px) rotate(-1deg);    
 transform: translate(2px, 1px) rotate(-1deg); }

80% { 
-webkit-transform: translate(-1px, -1px) rotate(1deg);
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-o-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg); }

90% { 
-webkit-transform: translate(2px, 2px) rotate(0deg);
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-o-transform: translate(2px, 2px) rotate(0deg);
    transform: translate(2px, 2px) rotate(0deg); }

100% { 
-webkit-transform: translate(1px, -2px) rotate(-1deg); 
-moz-transform: translate(1px, -2px) rotate(-1deg); 
-ms-transform: translate(1px, -2px) rotate(-1deg); 
-o-transform: translate(1px, -2px) rotate(-1deg); 
transform: translate(1px, -2px) rotate(-1deg); }
}


@keyframes rocket {
 0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-o-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg); }

10% { 
-webkit-transform: translate(-1px, -2px) rotate(-1deg);
-moz-transform: translate(-1px, -2px) rotate(-1deg);
-ms-transform: translate(-1px, -2px) rotate(-1deg);
-o-transform: translate(-1px, -2px) rotate(-1deg);
transform: translate(-1px, -2px) rotate(-1deg); }

20% { 

-webkit-transform: translate(-3px, 0px) rotate(1deg);
-moz-transform: translate(-3px, 0px) rotate(1deg);
-ms-transform: translate(-3px, 0px) rotate(1deg);
-o-transform: translate(-3px, 0px) rotate(1deg);
transform: translate(-3px, 0px) rotate(1deg); }

30% { 
-webkit-transform: translate(0px, 2px) rotate(0deg);
-moz-transform: translate(0px, 2px) rotate(0deg);
-ms-transform: ttranslate(0px, 2px) rotate(0deg);
-o-transform: translate(0px, 2px) rotate(0deg);
transform: translate(0px, 2px) rotate(0deg); }

40% { 
-webkit-transform: translate(1px, -1px) rotate(1deg);
-moz-transform: translate(1px, -1px) rotate(1deg);
-ms-transform: translate(1px, -1px) rotate(1deg);
-o-transform: translate(1px, -1px) rotate(1deg);
transform: translate(1px, -1px) rotate(1deg); }

50% { 
-webkit-transform: translate(-1px, 2px) rotate(-1deg);
-moz-transform: translate(-1px, 2px) rotate(-1deg);
-ms-transform: translate(-1px, 2px) rotate(-1deg);
-o-transform: translate(-1px, 2px) rotate(-1deg);
transform: translate(-1px, 2px) rotate(-1deg); }

60% { 
-webkit-transform: translate(-3px, 1px) rotate(0deg);
-moz-transform: translate(-3px, 1px) rotate(0deg);
-ms-transform: translate(-3px, 1px) rotate(0deg);
-o-transform: translate(-3px, 1px) rotate(0deg);
transform: translate(-3px, 1px) rotate(0deg); }
70% {
-webkit-transform: translate(2px, 1px) rotate(-1deg); 
-moz-transform: translate(2px, 1px) rotate(-1deg); 
-ms-transform: translate(2px, 1px) rotate(-1deg); 
-o-transform: translate(2px, 1px) rotate(-1deg);    
 transform: translate(2px, 1px) rotate(-1deg); }

80% { 
-webkit-transform: translate(-1px, -1px) rotate(1deg);
-moz-transform: translate(-1px, -1px) rotate(1deg);
-ms-transform: translate(-1px, -1px) rotate(1deg);
-o-transform: translate(-1px, -1px) rotate(1deg);
transform: translate(-1px, -1px) rotate(1deg); }

90% { 
-webkit-transform: translate(2px, 2px) rotate(0deg);
-moz-transform: translate(2px, 2px) rotate(0deg);
-ms-transform: translate(2px, 2px) rotate(0deg);
-o-transform: translate(2px, 2px) rotate(0deg);
    transform: translate(2px, 2px) rotate(0deg); }

100% { 
-webkit-transform: translate(1px, -2px) rotate(-1deg); 
-moz-transform: translate(1px, -2px) rotate(-1deg); 
-ms-transform: translate(1px, -2px) rotate(-1deg); 
-o-transform: translate(1px, -2px) rotate(-1deg); 
transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes liftoff {

0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-o-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg); }

10% { 
-webkit-transform: translate(-1px, -2px) rotate(5deg);
-moz-transform: translate(-1px, -2px) rotate(5deg);
-ms-transform: translate(-1px, -2px) rotate(5deg);
-o-transform: translate(-1px, -2px) rotate(5deg);
transform: translate(-1px, -2px) rotate(5deg); }

20% { 

-webkit-transform: translate(50px, -50px) rotate(10deg); 
-moz-transform: translate(50px, -50px) rotate(10deg); 
-ms-transform:translate(50px, -50px) rotate(10deg); 
-o-transform: translate(50px, -50px) rotate(10deg); 
transform: translate(50px, -50px) rotate(10deg);  }

30% { 
-webkit-transform: translate(100px, -150px) rotate(15deg);
-moz-transform: translate(100px, -150px) rotate(15deg);
-ms-transform: translate(100px, -150px) rotate(15deg);
-o-transform: translate(100px, -150px) rotate(15deg);
transform: translate(100px, -150px) rotate(15deg); }

40% { 
-webkit-transform: translate(250px, -300px) rotate(20deg);
-moz-transform: translate(250px, -300px) rotate(20deg);
-ms-transform: translate(250px, -300px) rotate(20deg);
-o-transform: translate(250px, -300px) rotate(20deg);
transform: translate(250px, -300px) rotate(20deg); }

50% { 
-webkit-transform:translate(350px, -425px) rotate(30deg);
-moz-transform: translate(350px, -425px) rotate(30deg);
-ms-transform: translate(350px, -425px) rotate(30deg);
-o-transform: translate(350px, -425px) rotate(30deg);
transform: translate(350px, -425px) rotate(30deg); }

60% { 
-webkit-transform: translate(500px, -550px) rotate(40deg);
-moz-transform: translate(500px, -550px) rotate(40deg);
-ms-transform: translate(500px, -550px) rotate(40deg);
-o-transform: translate(500px, -550px) rotate(40deg);
transform: translate(500px, -550px) rotate(40deg); }
70% {
-webkit-transform: translate(700px, -700px) rotate(50deg);
-moz-transform: translate(700px, -700px) rotate(50deg); 
-ms-transform: translate(700px, -700px) rotate(50deg);
-o-transform: translate(700px, -700px) rotate(50deg);   
 transform: translate(700px, -700px) rotate(50deg); }

80% { 
-webkit-transform: translate(900px, -800px) rotate(60deg);
-moz-transform: translate(900px, -800px) rotate(60deg);
-ms-transform: translate(900px, -800px) rotate(60deg);
-o-transform: translate(900px, -800px) rotate(60deg);
transform: translate(900px, -800px) rotate(60deg); }

90% { 
-webkit-transform: translate(1100px, -900px) rotate(65deg);
-moz-transform: translate(1100px, -900px) rotate(65deg);
-ms-transform: translate(1100px, -900px) rotate(65deg);
-o-transform: translate(1100px, -900px) rotate(65deg);
    transform: translate(1100px, -900px) rotate(65deg); }

100% { 
-webkit-transform: translate(1300px, -1000px) rotate(65deg); 
-moz-transform: translate(1300px, -1000px) rotate(65deg);  
-ms-transform: translate(1300px, -1000px) rotate(65deg); 
-o-transform: translate(1300px, -1000px) rotate(65deg); 
transform: translate(1300px, -1000px) rotate(65deg);  } 
}


@-webkit-keyframes liftoff  {

0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
-moz-transform: translate(2px, 1px) rotate(0deg);
-ms-transform: translate(2px, 1px) rotate(0deg);
-o-transform: translate(2px, 1px) rotate(0deg);
transform: translate(2px, 1px) rotate(0deg); }

10% { 
-webkit-transform: translate(-1px, -2px) rotate(5deg);
-moz-transform: translate(-1px, -2px) rotate(5deg);
-ms-transform: translate(-1px, -2px) rotate(5deg);
-o-transform: translate(-1px, -2px) rotate(5deg);
transform: translate(-1px, -2px) rotate(5deg); }

20% { 

-webkit-transform: translate(50px, -50px) rotate(10deg); 
-moz-transform: translate(50px, -50px) rotate(10deg); 
-ms-transform:translate(50px, -50px) rotate(10deg); 
-o-transform: translate(50px, -50px) rotate(10deg); 
transform: translate(50px, -50px) rotate(10deg);  }

30% { 
-webkit-transform: translate(100px, -150px) rotate(15deg);
-moz-transform: translate(100px, -150px) rotate(15deg);
-ms-transform: translate(100px, -150px) rotate(15deg);
-o-transform: translate(100px, -150px) rotate(15deg);
transform: translate(100px, -150px) rotate(15deg); }

40% { 
-webkit-transform: translate(250px, -300px) rotate(20deg);
-moz-transform: translate(250px, -300px) rotate(20deg);
-ms-transform: translate(250px, -300px) rotate(20deg);
-o-transform: translate(250px, -300px) rotate(20deg);
transform: translate(250px, -300px) rotate(20deg); }

50% { 
-webkit-transform:translate(350px, -425px) rotate(30deg);
-moz-transform: translate(350px, -425px) rotate(30deg);
-ms-transform: translate(350px, -425px) rotate(30deg);
-o-transform: translate(350px, -425px) rotate(30deg);
transform: translate(350px, -425px) rotate(30deg); }

60% { 
-webkit-transform: translate(500px, -550px) rotate(40deg);
-moz-transform: translate(500px, -550px) rotate(40deg);
-ms-transform: translate(500px, -550px) rotate(40deg);
-o-transform: translate(500px, -550px) rotate(40deg);
transform: translate(500px, -550px) rotate(40deg); }
70% {
-webkit-transform: translate(700px, -700px) rotate(50deg);
-moz-transform: translate(700px, -700px) rotate(50deg); 
-ms-transform: translate(700px, -700px) rotate(50deg);
-o-transform: translate(700px, -700px) rotate(50deg);   
 transform: translate(700px, -700px) rotate(50deg); }

80% { 
-webkit-transform: translate(900px, -800px) rotate(60deg);
-moz-transform: translate(900px, -800px) rotate(60deg);
-ms-transform: translate(900px, -800px) rotate(60deg);
-o-transform: translate(900px, -800px) rotate(60deg);
transform: translate(900px, -800px) rotate(60deg); }

90% { 
-webkit-transform: translate(1100px, -900px) rotate(65deg);
-moz-transform: translate(1100px, -900px) rotate(65deg);
-ms-transform: translate(1100px, -900px) rotate(65deg);
-o-transform: translate(1100px, -900px) rotate(65deg);
    transform: translate(1100px, -900px) rotate(65deg); }

100% { 
-webkit-transform: translate(1300px, -1000px) rotate(65deg); 
-moz-transform: translate(1300px, -1000px) rotate(65deg);  
-ms-transform: translate(1300px, -1000px) rotate(65deg); 
-o-transform: translate(1300px, -1000px) rotate(65deg); 
transform: translate(1300px, -1000px) rotate(65deg);  }
}

.shake {
-webkit-animation-name: rocket;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rocket;
-moz-animation-duration: 0.8s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rocket;
animation-duration: 0.8s;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.liftoff {
-webkit-animation-name: liftoff;
-webkit-animation-duration: 2.5s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: liftoff;
-moz-animation-duration: 2.5s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: liftoff;
animation-duration: 2.5s;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

最佳答案

嗯...
我认为这有点矫枉过正，我使用 Prefixfree 所以我不必担心那种事情。您可能希望删除 opera 前缀，因为 Opera 已切换到 WebKit。

Prefixfree

关于CSS 动画 Firefox - Noob 矫枉过正？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24763919/

文章推荐： css - @font-face 在 Chrome 和 Firefox 中不工作

文章推荐： css - background-clip 属性 - 背景图像被切断

文章推荐： javascript - 水平自动收报机被过早切断？

firefox - 将 Firefox 插件安装到 Firefox OS Firefox 浏览器中
我已经为桌面和移动 Firefox 开发了一些 Firefox 插件(扩展)，但现在我无法将插件/扩展安装到在 Firefox OS 中运行的浏览器中(我正在使用模拟器插件)。请注意，我不想创建一个传
firefox - 如何将选项卡从桌面版 Firefox 发送到移动版 Firefox 应用程序
可以将选项卡/网址从移动 Firefox 发送到桌面 Firefox 浏览器，但是否可以以相反的方式执行此操作？从桌面版 Firefox 到移动版 Firefox，并像其他方向一样自动加载。我找不到除
firefox - 如何在 Firefox 扩展中观察指定的 Firefox 事件？
我想等待 Firefox-Browser-Events (sessionstore-windows-restored, user-interaction-inactive,..) 以清除历史记录。我的
firefox - 如何在没有 Firefox 的情况下下载 Firefox 附加组件
我在公司网络中，想为 Firefox 安装一些开发人员工具。不幸的是，政策禁止 Firefox 直接访问互联网，但还有其他浏览器可以访问互联网。现在:如何在没有 Firefox 的情况下直接下载 xp
firefox - Firefox 中的选择性缓存
是否有用于在 firefox 中执行选择性缓存的插件或方法？我可以disable caching entirely ，但我仍然希望能够缓存一些需要几秒钟才能加载的大型 javascript 库 (ex
firefox-addon - Firefox SDK 简单存储和 Firefox 同步
我目前正在将 Chrome 扩展程序转换为 Firefox 插件，并希望复制 chrome.storage.sync 功能。但是，我无法使用 simple-storage 找到是否由 Firefox
firefox - Firefox 附加组件是否有默认许可证？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
firefox - 地理定位不适用于 Firefox
所以，我使用这个代码: var options = { enableHighAccuracy: true, timeout: 2000, maximumAge: 100 }; navi
firefox - 在启动时使用临时加载项打开 Firefox
有没有办法打开 Firefox 并强制它在启动时加载临时加载项(webextension)？通常我必须手动去about:debugging并选择我硬盘上的扩展名。我正在寻找一个可以在加载 Firefo
firefox - 无法部署扩展 (firefox)
我正在密切关注教程 here当我尝试创建 Firefox 扩展时。我的扩展有以下树: backtosearch +-chrome +-content backtosearch.
firefox - 如何从代码重新启动 firefox？
如何从代码中正确地重启 firefox(没有任何“恢复 session ”的东西并且使用与以前相同的窗口)？我知道 bash 脚本进程中“firefox-bin”的 pid，并且我已将自定义插件加载
firefox - Firefox 开发者工具有哪些替代品？
自从 Firefox 的最后几次更新以来，我们心爱的 Firebug 已集成到 Firefox 开发人员工具中，并且包括我在内的很多人 don't like what happened到 Firebu
firefox - Firefox 可以显示文件的上传状态吗？
当你在某处上传图片时，在使用chrome时，你可以看到状态栏实际上显示了上传的“状态”，即上传完成的百分比。 Firefox 的状态栏有没有办法显示这个上传状态？最佳答案用谷歌搜索这个，发现这个:
firefox - Firefox 将当前打开的选项卡保存在磁盘的何处
例如 Chrome 保存在这里:~Library/Application Support/Google/Chrome/Default/Current Tabs和 Safari 在这里 ~/Librar
firefox - 当今 Firefox 和 Firefox 开发人员之间的区别 - 2017
当火狐开发者版推出时，我很高兴，我可以使用WebIde、响应式设计工具、滴管等……今天我受够了。里面有很多bug，我就不一一列举我和我的同事发送和批准了多少bug了…… 我在 google 中搜索过
firefox - Firefox 浏览器控制台没有提示？
我在 Ubuntu 上使用 Firefox，版本 39.0。我正在尝试调试一个附加组件，并希望在 chrome 权限下运行一些 JavaScript。根据 this page我应该能够在浏览器控制台中
firefox - 刷新书签中的收藏夹图标(Firefox)
几天前，我更改了我的网站的图标:打开网站后，它可以很好地工作: 我的网站也在我的书签中，但是显示了旧的收藏夹图标: 我已经看过here，但是答案并没有解决我的问题。解决方法可能非常简单，但是到目前为
firefox - Rust不接受来自本地消息传递的标准输入-FireFox
我正在使用web API从Firefox开发一个 native 消息传递应用程序。该扩展应该调用一个解析stdin的应用程序，然后基于它解析的一些数据调用我的另一个rust应用程序，但是出于显而易见的
firefox - Firefox 扩展和插件有什么区别？
在 Firefox 中有插件和扩展。你能解释一下为什么这些插件有不同的名称和标签吗？它们是否差异如此之大，以至于需要不同的名称？我认为区分这些东西有点不自然，扩展具有越来越多的功能，与插件相比它们缺少
firefox - Firefox 扩展中的并发和多线程
我正在使用附加构建器和附加 SDK 编写 Firefox 扩展。到目前为止，我已经能够解决任何限制，而无需迁移到 XUL。但是，我遇到了障碍。我的扩展程序有一个长时间运行的进程，可能会阻塞，因此我需

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

CSS 动画 Firefox - Noob 矫枉过正？