加载页面时的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>