Question

语言： CSS3 / jQuery / HTML5 / PHP

我在这里有一堆HTML5页面上的一些圆形HREF样式，如DIV 。

enter image description here

在页面加载时，它们应该从实际尺寸的 0％扩展到 0.80％，
......并且在悬停时，它们应该扩展到 100％（这都是使用CSS3完成的。）

现场演示： http://174.127.117.20/~interact/
（如果你在CHROME上看到它，你会发现它的行为正确。）

DILEMMA：

但是，如果您使用 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浏览器？我不知道我不再缺少什么，任何指导＆amp;帮助将不胜感激！谢谢你的时间！

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

Answer 1

您正在使用

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

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

CSS3动画仅对CHROME＆amp; FIREFOX（在OPERA没有回复？）

1 个答案: