CSS3 动画仅在 CHROME 和 FIREFOX 中表现正确（在 OPERA 中没有响应？）

Question

语言：CSS3 / jQuery / HTML5 / PHP

我这里有一堆 圆形 HREF，样式类似于 DIV，位于 HTML5 页面上。

在页面加载时，它们应该从实际大小的 0% 放大到 0.80%，
...在悬停时，它们应该放大到 100%（这一切都使用 CSS3 完成）。

现场演示： http://174.127.117.20/~interact/
（如果您在 CHROME 上查看此内容，您会看到它的行为正确无误。）

困境：

• 但是，如果您使用 OPERA 浏览器查看它，它不会动画 （放大）页面加载。

我总共有 10 个泡泡。这些气泡按此顺序分类class="expand update1"（update1 到 update10）。
最初，在页面加载时，我使用带有延迟的 jQuery 向它们展示：

// LOAD BUBBLES

    $('.update1').delay(300).show(0);
    $('.update2').delay(1000).show(0);
    $('.update3').delay(500).show(0);
    $('.update4').delay(100).show(0);
    $('.update5').delay(250).show(0);
    $('.update6').delay(800).show(0);
    $('.update7').delay(500).show(0);
    $('.update8').delay(200).show(0);
    $('.update9').delay(600).show(0);
    $('.update10').delay(150).show(0);

然后使用 CSS3 动画，我将它们从其大小的 0% 放大到 0.80%：
（我这样做是为了确保我拥有一切。也许我做错了，或者只是懒惰......但我认为问题不在于这里？）

@keyframes anim
{
0% {
        transform: scale(0,0);
        -ms-transform: scale(0,0);
        -moz-transform: scale(0,0);
        -webkit-transform: scale(0,0); }
100% {
        transform: scale(0.80);
        -ms-transform: scale(0.80);
        -moz-transform: scale(0.80);
        -webkit-transform: scale(0.80);}
}

@-moz-keyframes anim /* FIREFOX */
{
0% {
        transform: scale(0,0);
        -ms-transform: scale(0,0);
        -moz-transform: scale(0,0);
        -webkit-transform: scale(0,0); }
100% {
        transform: scale(0.80);
        -ms-transform: scale(0.80);
        -moz-transform: scale(0.80);
        -webkit-transform: scale(0.80);}
}

@-webkit-keyframes anim /* SAFARI and CHROME */
{
0% {
        transform: scale(0,0);
        -ms-transform: scale(0,0);
        -moz-transform: scale(0,0);
        -webkit-transform: scale(0,0); }
100% {
        transform: scale(0.80);
        -ms-transform: scale(0.80);
        -moz-transform: scale(0.80);
        -webkit-transform: scale(0.80);}
}

@-o-keyframes anim /* OPERA */
{
0% {
        transform: scale(0,0);
        -ms-transform: scale(0,0);
        -moz-transform: scale(0,0);
        -webkit-transform: scale(0,0); }
100% {
        transform: scale(0.80);
        -ms-transform: scale(0.80);
        -moz-transform: scale(0.80);
        -webkit-transform: scale(0.80);}
}

以下是这些气泡的完整 CSS：

a.expand{
    display: none;
    margin: auto;

    transition:all .8s; 

    /* FIREFOX */
    -moz-transition:all .8s;

    /* SAFARI and CHROME */
    -webkit-transition:all .8s;

    /* OPERA */
    -o-transition:all .8s;

    z-index: 2;
    color: #fff;
    border: 2px solid #fff;
    text-decoration: none;
    text-align: center;
    font-family: 'BebasNeueRegular', Arial, sans-serif;
    font-size: 2em;
    letter-spacing: 0;
    padding: 0px;

    animation-iteration-count: 1;
    animation-delay: 0, 10s;

    transform: scale(0.80);
    -webkit-transform: scale(0.80);
    -moz-transform: scale(0.80);
    -o-transform: scale(0.80);
    -ms-transform: scale(0.80);
}

a.expand:hover{
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}


.update1 {
    animation: anim 0.9s 1 ease-in-out;
    -webkit-animation: anim 0.9s 1 ease-in-out;
    -moz-animation: anim 0.9s 1 ease-in-out;
    -o-animation: anim 0.9s 1 ease-in-out;
    -ms-animation: anim 0.9s 1 ease-in-out;
}
.update2 {
    animation: anim 1s 1 ease-in-out;
    -webkit-animation: anim 1s 1 ease-in-out;
    -moz-animation: anim 1s 1 ease-in-out;
    -o-animation: anim 1s 1 ease-in-out;
    -ms-animation: anim 1s 1 ease-in-out;
}
.update3 {
    animation: anim 1.2s 1 ease-in-out;
    -webkit-animation: anim 1.2s 1 ease-in-out;
    -moz-animation: anim 1.2s 1 ease-in-out;
    -o-animation: anim 1.2s 1 ease-in-out;
    -ms-animation: anim 1.2s 1 ease-in-out;
}
.update4 {
    animation: anim 1.1s 1 ease-in-out;
    -webkit-animation: anim 1.1s 1 ease-in-out;
    -moz-animation: anim 1.1s 1 ease-in-out;
    -o-animation: anim 1.1s 1 ease-in-out;
    -ms-animation: anim 1.1s 1 ease-in-out;
}
.update5 {
    animation: anim 0.9s 1 ease-in-out;
    -webkit-animation: anim 0.9s 1 ease-in-out;
    -moz-animation: anim 0.9s 1 ease-in-out;
    -o-animation: anim 0.9s 1 ease-in-out;
    -ms-animation: anim 0.9s 1 ease-in-out;
}
.update6 {
    animation: anim 0.8s 1 ease-in-out;
    -webkit-animation: anim 0.8s 1 ease-in-out;
    -moz-animation: anim 0.8s 1 ease-in-out;
    -o-animation: anim 0.8s 1 ease-in-out;
    -ms-animation: anim 0.8s 1 ease-in-out;
}
.update7 {
    animation: anim 1.4s 1 ease-in-out;
    -webkit-animation: anim 1.4s 1 ease-in-out;
    -moz-animation: anim 1.4s 1 ease-in-out;
    -o-animation: anim 1.4s 1 ease-in-out;
    -ms-animation: anim 1.4s 1 ease-in-out;
}
.update8 {
    animation: anim 0.9s 1 ease-in-out;
    -webkit-animation: anim 0.9s 1 ease-in-out;
    -moz-animation: anim 0.9s 1 ease-in-out;
    -o-animation: anim 0.9s 1 ease-in-out;
    -ms-animation: anim 0.9s 1 ease-in-out;
}
.update9 {
    animation: anim 1.9s 1 ease-in-out;
    -webkit-animation: anim 1.9s 1 ease-in-out;
    -moz-animation: anim 1.9s 1 ease-in-out;
    -o-animation: anim 1.9s 1 ease-in-out;
    -ms-animation: anim 1.9s 1 ease-in-out;
}
.update10 {
    animation: anim 1.4s 1 ease-in-out;
    -webkit-animation: anim 1.4s 1 ease-in-out;
    -moz-animation: anim 1.4s 1 ease-in-out;
    -o-animation: anim 1.4s 1 ease-in-out;
    -ms-animation: anim 1.4s 1 ease-in-out;
}

.update1, .update5, .update9 {
    background-color: #174EF2;
}

.update2, .update6, .update10 {
    background-color: #F13137;
}

.update3, .update7 {
    background-color: #FEB514;
}

.update4, .update8 {
    background-color: #04AA17;
}

我真的不知道为什么我无法定位 Opera 浏览器？我不能再告诉我我错过了什么，任何指导和帮助将不胜感激！感谢您的宝贵时间！

---

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

Answer 1

你正在使用

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

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