延迟

Question

我正在使用CSS content属性在html标记之前添加内容。

span::before {
    content: 'content that needs a delay';
}

<span></span>

有没有办法延迟内容的可见性（使用CSS）？

Answer 1

＆＃13;

＆＃13;

span::before {
    content: 'content that needs a delay';
     margin-top: 25px;
    font-size: 21px;
    text-align: center;
    animation: fadein 4s;
    -moz-animation: fadein 4s; /* Firefox */
    -webkit-animation: fadein 4s; /* Safari and Chrome */
    -o-animation: fadein 4s; /* Opera */

}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

＆＃13;

<span></span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试css-animation

＆＃13;

＆＃13;

span::before {
  content: 'content that needs a delay';
  opacity: 0;
  animation: 2s fadeIn;
  animation-fill-mode: forwards;
  transition: opacity 1.5s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

＆＃13;

<span></span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将CSS animation与css animation-fill-mode:forwards一起使用，否则完成动画后会隐藏您的内容。

＆＃13;

＆＃13;

span::before {
    content: 'content that needs a delay';
    -webkit-animation:0.6s opc forwards;
    opacity:0;
    transition:opacity 0.6s;
}

@-webkit-keyframes opc{
 from{
   opacity:0;
 }
 to{
   opacity:1;
 }
}

＆＃13;

<span></span>

＆＃13;

＆＃13;

＆＃13;