Jquery CSS3动画仅适用于CHROME和FIREFOX（在OPERA中没有响应？）

语言：CSS3/jQuery/HTML5/PHP

我这里有一堆圆形的HREF，样式类似HTML5页面上的div

在pageload上，它们应该从实际大小的0%扩展到0.80%， ... 在悬停时，它们应该可以扩展到100%，这都是使用CSS3完成的

现场演示：http://174.127.117.20/~z~互动/ 如果你在CHROME上查看它，你会看到它的正常运行

困境：

但是，如果使用OPERA浏览器查看，则不会设置动画 在页面负载上完全放大。 我一共有10个泡泡。这些气泡按以下顺序分类：class=将update1 update1扩展到update10。 最初，在pageload上，我使用带有延迟的jQuery显示它们：

//装入气泡 $'.update1'.delay300.show0； $'.update2'.delay1000.show0； $'.update3'.delay500.show0； $'.update4'.delay100.show0； $'.update5'.delay250.show0； $'.update6'.delay800.show0； $'.update7'.delay500.show0； $'.update8'.delay200.show0； $'.update9'.delay600.show0； $'.update10'.delay150.show0； 然后使用CSS3动画，我将它们的大小从0%放大到0.80%： 我这样做是为了确保我把一切都准备好。也许我做错了，或者只是因为太懒了。。。但我认为问题不在这里

@关键帧动画 { 0% { 变换：scale0,0； -ms变换：scale0,0； -moz变换：scale0,0； -webkit转换：scale0,0；} 100% { 变换：scale0.80； -ms变换：scale0.80； -moz变换：scale0.80； -webkit转换：scale0.80；} } @-moz关键帧动画/*FIREFOX*/ { 0% { 变换：scale0,0； -ms变换：scale0,0； -moz变换：scale0,0； -webkit转换：scale0,0；} 100% { 变换：scale0.80； -ms变换：scale0.80； -moz变换：scale0.80； -webkit转换：scale0.80；} } @-webkit动画关键帧/*SAFARI和CHROME*/ { 0% { 变换：scale0,0； -ms变换：scale0,0； -moz变换：scale0,0； -webkit转换：scale0,0；} 100% { 变换：scale0.80； -ms变换：scale0.80； -moz变换：scale0.80； -webkit转换：scale0.80；} } @-o-关键帧动画/*歌剧*/ { 0% { 变换：scale0,0； -ms变换：scale0,0； -moz变换：scale0,0； -webkit转换：scale0,0；} 100% { 变换：scale0.80； -ms变换：scale0.80； -moz变换：scale0.80； -webkit转换：scale0.80；} } 下面是这些气泡的完整CSS：

a、 扩展{ 显示：无； 保证金：自动； 过渡期：全部8秒； /*火狐*/ -moz转换：全部为0.8s； /*狩猎与铬*/ -webkit转换：所有.8s； /*歌剧院*/ -o-过渡：均为0.8s； z指数：2； 颜色：fff； 边框：2个实心fff； 文字装饰：无； 文本对齐：居中； 字体系列：“BebasNeueRegular”，Arial，无衬线； 字号：2em； 字母间距：0； 填充：0px； 动画迭代次数：1； 动画延迟：0，10s； 变换：scale0.80； -webkit转换：scale0.80； -moz变换：scale0.80； -o变换：scale0.80； -ms变换：scale0.80； } a、 展开：悬停{ 变换：scale1； -webkit转换：scale1； -moz变换：scale1； -o变换：scale1； -ms变换：scale1； } .更新1{ 动画：动画0.9s1轻松输入输出； -webkit动画：动画0.9s1易入易出； -moz动画：动画0.9s1轻松输入输出； -o动画：动画0.9s1缓进缓出； -ms动画：动画0.9s1缓进缓出； } .更新2{ 动画：动画片1轻松进退； -webkit动画：动画1轻松输入输出； -moz动画：动画1s 1轻松输入输出； -o-动画：动画1轻松输入输出； -ms动画：动画1轻松输入输出； } .更新3{ 动画：动画1.2s1轻松输入输出； -webkit动画：动画1.2s 1轻松输入输出； -moz动画：动画1.2s 1轻松输入输出； -o-动画：动画1.2s 1缓进缓出； -ms动画：动画1.2s 1轻松输入输出； } .更新4{ 动画：动画1.1s1轻松输入输出； -webkit动画：动画1.1s1易入易出； -moz动画：动画1.1s1轻松输入输出； -o动画：动画1.1s1轻松输入输出； -ms动画：动画1.1s 1轻松输入输出； } .更新5{ 动画：动画0.9s1轻松输入输出； -webkit动画：动画0.9s1易入易出； -moz动画：动画0.9s1轻松输入输出； -o动画：动画0.9s1缓进缓出； -ms动画：动画0.9s1缓进缓出； } .更新6{ 动画：动画0.8s1缓进缓出； -webkit动画：动画0.8s1易入易出； -moz动画：动画0.8s1轻松输入输出； -o动画：动画0.8s1缓进缓出； -ms动画：动画0.8s1缓进缓出； } .更新7{ 动画：动画1.4s1ease- 输入输出； -webkit动画：动画1.4s 1轻松输入输出； -moz动画：动画1.4s 1轻松输入输出； -o-animation:anim 1.4s 1易入易出； -ms动画：动画1.4s 1轻松输入输出； } .更新8{ 动画：动画0.9s1轻松输入输出； -webkit动画：动画0.9s1易入易出； -moz动画：动画0.9s1轻松输入输出； -o动画：动画0.9s1缓进缓出； -ms动画：动画0.9s1缓进缓出； } .更新9{ 动画：动画1.9s1轻松输入输出； -webkit动画：动画1.9s1易入易出； -moz动画：动画1.9s1轻松输入输出； -o-动画：动画1.9s1易入易出； -ms动画：动画1.9s1轻松输入输出； } .更新10{ 动画：动画1.4s1轻松输入输出； -webkit动画：动画1.4s 1轻松输入输出； -moz动画：动画1.4s 1轻松输入输出； -o-animation:anim 1.4s 1易入易出； -ms动画：动画1.4s 1轻松输入输出； } .update1、.update5、.update9{ 背景色：174EF2； } .update2、.update6、.update10{ 背景色：F13137； } .update3、.update7{ 背景色：FEB514； } .update4、.update8{ 背景色：04AA17； } 我真的不知道为什么我不能瞄准Opera浏览器？我不知道我错过了什么，任何指导和帮助将不胜感激！谢谢你抽出时间

我使用的是Opera的最新版本：12.11版，build 1661

 -webkit-animation: for chrome
 -moz-animation: for mozilla
 -o-animation: for opera

---

我认为在opera中，css3没有正确渲染。尝试通过w3school，检查css3在不同浏览器中的兼容性。

什么版本的Opera？它们仅在最新版本中受支持。感谢您的快速响应，我正在使用最新版本的Opera:version 12.11，build 1661-类似的东西，但没有动画/缩放，只有过渡/字体大小，在Opera 12.11中工作，甚至没有供应商前缀感谢@Victor的响应，但我的Opera问题是在加载浏览器时预加载动画，它们应该扩展到它们的实际大小，我对缩放/字体大小或转换没有问题。我的示例是，当浏览器加载时，它们也从零扩展到实际大小，但没有动画。另外，你想创建JSFIDLE来玩吗？这不是答案。此外，如果您想检查CSS支持，请使用。w3schools是您最不希望查找参考资料的地方。您似乎没有使用w3schools。他们提供的实时编辑器是测试跨浏览器兼容性的一种非常好且简单的方法，我曾经使用过W3。如果你想要一个实时编辑器，有很多更好的选择，包括。至于为什么w3schools不是一个好的资源，请参阅。我使用的是jsfiddle.net，但是您没有获得w3school中所示的列表命令和相应的详细信息。也许他们有一些问题，但简单性才是最重要的是，我知道CSS3不能正确地为Opera浏览器呈现，因此我在上面的文章中提到了这一点。然而，你的帖子并不是一个答案，它只是对原来帖子的重复，这是一个问题。为了实现跨浏览器的兼容性，我已经尽了一切努力，我已经发布了我的问题作为最后的手段。我无法从我的角度找出我缺少什么，因为我已经涵盖了所有内容，因此我需要有更敏锐眼光的人的进一步帮助。谢谢你抽出时间。