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;
}

Answer 2

它将延迟两秒，然后开始动画。它很有用。

-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;

CSS3淡入延迟？

2 个答案: