0

语言：CSS3 / jQuery / HTML5 / PHP

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

在此处输入图像描述

在页面加载时，它们应该从实际大小的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

4

1 回答 1

-2

您正在使用

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

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

于 2012-12-11T04:37:03.540 回答