CSS3 淡入延迟？

Question

我在一个非常简单的页面上淡入两个对象。首先是标志，然后是文字。为什么文本上的动画不会因这段代码而延迟？另一个工作完美，但没有任何延迟。

    .centralimg {
        background-image: url(logo.png);
        background-size: 576px 173px;
        width: 576px;
        height: 173px;
        animation: fadein 1200ms;
        -moz-animation: fadein 1200ms; /* Firefox */
        -webkit-animation: fadein 1200ms; /* Safari and Chrome */
        -o-animation: fadein 1200ms; /* Opera */
                }
    .centraltext {
        color: rgb(147, 145, 147);
        font-family: 'Nunito', sans-serif;
        font-size: 8pt;
        margin-top: 25px;
        animation: fadein 1200ms;
        animation-delay: 3s;
        -moz-animation: fadein 1200ms; /* Firefox */
        -moz-animation-delay:3s;
        -webkit-animation: fadein 1200ms; /* Safari and Chrome */
        -webkit-animation-delay:3s;
        -o-animation: fadein 3200ms; /* Opera */
        }

Answer 1

您的代码是正确的，但您必须向 .centraltext 添加一些属性，因为在应用动画之前它不应该可见(JSFiddle 中的 opacity: 0示例)。

同时添加属性 animation-fill-mode 以保留最后一帧的样式。

示例:JSFiddle

.centraltext {
  ...
  opacity: 0;
  animation-fill-mode: forwards;
}