css3 动画在 Firefox 上运行不佳

Question

我正在尝试一个一个地上传这三个 block ，我想在 CSS3 的帮助下让动画控制变换。现在发生的事情是，它在 google chrome 中运行良好(正是我想要的方式)，但在 firefox 中运行不正常。在 firefox 中，三个 block 首先可见，然后 css3 动画开始工作，这是我不想要的。我想要动画从一开始就出现在谷歌浏览器中。

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

有几件事你应该改变。

首先，您应该为所有这三个类使用一个公共(public)类，因为它们的样式相似并且都具有相同的效果。我使用了一个名为 fadein 的类(并将动画重命名为此，尽管它们不需要匹配)。

第二个是您可以为每个重用相同的动画，只需使用不同的 animation-delay 以便它们的间隔不同。

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

最后，如果你要使用 -webkit-keyframes，你也应该使用 -webkit-transform inside以便您获得更多浏览器支持。

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>