如何延遲以下淡出命令的開始？

Question

我希望延遲以下命令的開始，並希望得到任何建議。我是這個初學者，並且提前感謝你。

示例文字

Answer 1

使用動畫 參考animation css

您可以通過設置animation-delay延遲動畫：正在加載的元素和動畫序列的開始之間的時間。

在我們的代碼動畫延遲設置爲3秒-webkit-animation: fadeout 5s linear 3s forwards;

.fadeOut { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #191970; 
 
    color: #fff; 
 
    -webkit-animation: fadeout 5s linear 3s forwards; 
 
    animation: fadeout 5s linear 3s forwards; 
 
} 
 

 
@-webkit-keyframes fadeout { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    25% { 
 
    opacity: 0.75; 
 
    } 
 
    50% { 
 
    opacity: 0.5; 
 
    } 
 
    75% { 
 
    opacity: 0.25; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes fadeout { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    25% { 
 
    opacity: 0.75; 
 
    } 
 
    50% { 
 
    opacity: 0.5; 
 
    } 
 
    75% { 
 
    opacity: 0.25; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
}

<div class="xr_ap xr_ac c2" id="xr_xpxr_40"> 
 
<span class="xr_annt animated fadeOut c1" id="xr_uid_10"></span> </div> 
 
<div class="xr_txt Normal_text c4"> 
 
<span class="xr_annt animated fadeOut c3">Sample Text</span> 
 
</div>