加載頁面時的CSS動畫

Question

爲什麼在頁面加載時下面的代碼不動畫？

#error { 
 
    opacity: 0 text-align: center; 
 
    background-color: rgba(255, 0, 0, 0.4); 
 
    border-radius: 10px; 
 
    border: 4px solid rgba(255, 0, 0, 0.4); 
 
    line-height: 1.5; 
 
    -webkit-background-clip: padding-box; /* for Safari */ 
 
    background-clip: padding-box; 
 
} 
 
.animate { 
 
    opacity: 1; 
 
    transition: opacity 0.4s ease-in; 
 
    -ms-transition: opacity 0.4s ease-in; 
 
    -moz-transition: opacity 0.4s ease-in; 
 
    -webkit-transition: opacity 0.4s ease-in; 
 
}

<div id="error" class="animate">This is an error message!</div>

Answer 1

，如果你希望這是一個動畫不能同時申請兩種風格。

要完成此操作，您可以使用JavaScript在頁面加載後應用opacity屬性。

window.onload = function() { 
 
    document.getElementById("error").style.opacity = 1; 
 
}

#error { 
 
    opacity: 0; 
 
    text-align: center; 
 
    background-color: rgba(255, 0, 0, 0.4); 
 
    border-radius: 10px; 
 
    border: 4px solid rgba(255, 0, 0, 0.4); 
 
    line-height:1.5; 
 
    -webkit-background-clip: padding-box; /* for Safari */ 
 
    background-clip: padding-box; 
 
    transition: opacity 0.4s ease-in; 
 
    -ms-transition: opacity 0.4s ease-in; 
 
    -moz-transition: opacity 0.4s ease-in; 
 
    -webkit-transition: opacity 0.4s ease-in; 
 
}

<div id="error">This is an error message!</div>