Question

我试图逐个上传这三个块，我想在CSS3的帮助下进行动画控制转换。现在发生了什么，它在谷歌浏览器中工作正常（完全按照我想要的方式）但它在firefox中运行不正常。在firefox中，三个块首先可见，而css3动画开始工作，这是我不想要的。我希望动画从一开始就像谷歌Chrome一样。

body {
    font-size: 14px;
    line-height: 18px;
    font-family: arial;
}
.wrapper {
    width: 960px;
    margin: 10px auto;
}
.one {
    float: left;
    width: 100px;
    height: 100px;
    margin: 20px 0;
    border: 1px solid #afafaf;
    background: #ddd;
    animation: one 1s ease 1s;
    -webkit-animation: one 1s ease 1s;
}
@keyframes one {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@-webkit-keyframes one {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
.two {
    float: left;
    width: 100px;
    height: 100px;
    margin: 20px 0;
    border: 1px solid #afafaf;
    background: #ddd;
    animation: two 2s ease 2s;
    -webkit-animation: two 2s ease 2s;
}
@keyframes two {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@-webkit-keyframes two {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
.three {
    float: left;
    width: 100px;
    height: 100px;
    margin: 20px 0;
    border: 1px solid #afafaf;
    background: #ddd;
    animation: two 3s ease 3s;
    -webkit-animation: two 3s ease 3s;
}
@keyframes three {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@-webkit-keyframes three {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

<section class="wrapper">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </section>

Answer 1

你应该改变一些事情。

首先，你应该为所有三个使用一个共同的类，因为它们的风格相似，并且都具有相同的效果。我使用了一个名为fadein的类（并且还将动画重命名为此，但它们不需要匹配）。

第二个是你可以为每个动画重复使用相同的动画，只需使用不同的animation-delay s，这样它们的间隔就会不同。

第三个是你需要将所有这些状态的初始状态设为scale(0)，以便它们不会显示在FF中。然后，您可以使用animation-direction:forwards确保它们也显示在动画之后。

最后，如果您要使用-webkit-keyframes，那么您也应该使用<{1}} 中的-webkit-transform ，以便获得更多浏览器支持。

body { font-size: 14px; line-height: 18px; font-family: arial; } .wrapper { width: 960px; margin: 10px auto; } .fadein { float: left; width: 100px; height: 100px; margin: 20px 0; border: 1px solid #afafaf; background: #ddd; transform:scale(0); -webkit-transform:scale(0); animation: fadein 1s ease 1s forwards; -webkit-animation: fadein 1s ease 1s forwards; } @keyframes fadein { 0% { transform: scale(0); } 100% { transform: scale(1); } } @-webkit-keyframes fadein { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); } } .two { animation-delay: 2s; -webkit-animation-delay: 2s; } .three { animation-delay: 3s; -webkit-animation-delay: 3s; }

<section class="wrapper"> <div class="fadein one"></div> <div class="fadein two"></div> <div class="fadein three"></div> </section>

css3动画在Firefox上运行不佳

1 个答案: