遅延を伴うCSSコンテンツ

Question

CSS contentプロパティを使用して、htmlタグの前にコンテンツを追加しています。

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

<span></span>

（CSS付き）コンテンツの可視性を遅らせるための方法はあり ？

Answer 1

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

<span></span>

Answer 2

は、アニメーションの完了後に、それはあなたのコンテンツを非表示になりますCSS animation-fill-mode:forwardsか、他に使用CSS animationcss-animation

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

<span></span>

Answer 3

を試してみてください。

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

<span></span>