css3 动画在 Firefox 上效果不佳

Question

我正在尝试将三个块一一上传，并且我想借助 CSS3 使动画控制变换。现在发生的事情是，它在谷歌浏览器中运行良好（正是我想要的方式），但在 Firefox 中运行不正常。在 Firefox 中，三个块首先可见，然后 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

有几件事你应该改变。

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

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

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

最后，如果你要使用-webkit-keyframes，你应该在里面使用-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>