Html 带有过渡的不透明度会导致“不透明度”；渲染flick“；页面加载时

我正在尝试用不透明度和过渡创建淡入/淡出效果：Div应该从0不透明度开始，并在悬停时可见。我注意到，如果我将过渡效果添加到不透明度中，在初始加载时会出现一个

消失的flick

（有点像自动淡出1到0）。这里需要注意的是，我只有在使用外部样式表时才会出现这种行为——如果我将CSS直接放在样式标签中，效果会很好

div{
不透明度：0；
过渡：不透明度0.5s；
}
div:悬停{
不透明度：1；
}

/*将css放在这里效果很好*/
不透明度和过渡