帶有延遲的CSS內容

我正在使用CSS content屬性在html標記之前添加內容。帶有延遲的CSS內容

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

<span></span>

是否有延遲內容（與CSS）的可見性的方法嗎？

來源

2016-09-07 Sampath Liyanage

我不認爲你可以用CSS做。你可以使用jquery函數「show」來做到這一點。 http://api.jquery.com/show/請看這裏 –

@AksheyBhat你不能在僞元素上使用JS，因爲它們不在DOM中。 –

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>

來源

2016-09-07 05:00:57 Gowtham

嘗試css-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>

來源

2016-09-07 04:57:48

根據MDN，可見度屬性是可動畫的，但它從單一的步驟從不可見到可見的動畫。 –

ikr。只是想強調使用CSS動畫來達到他想要的效果的重要性。使用不透明將會完成這項工作。 –

使用CSS animation用CSS animation-fill-mode:forwards否則動畫將隱藏的內容完成後。

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>

來源

2016-09-07 04:59:58 frnt

你也可以用'overflow：hidden'或'transform：translateX'從大到小或0〜 –

@DenisSheremet將'max-width'從0增大到某個大，這是真的，我們可以使用很多這樣的選項，但是在將其設置爲0時，我們不會隱藏該元素，而只是減少它的不透明度。而如果你隱藏了一個元素，並且你附近有一些元素，那麼附近的元素就會佔用你的位置，並且在執行動畫的時候，你可以看到附近的元素向右移動，試試你會得到我的觀點:-) – frnt

帶有延遲的CSS內容

回答

相關問題