Css 更改显示时不播放动画

我想制作一个动画，但它并不平滑。当我卸下显示器时，一切正常。如何做到展示流畅

div{
显示：无；
不透明度：0；
宽度：50px；
高度：50px；
过渡：不透明度3s；
背景色：黑色；
}
输入：选中+div{
显示：块；
不透明度：1；
}

HTML

我想你需要这个

div{width:50px；
高度：50px；
背景色：黑色；
可见性：隐藏；
不透明度：0；
过渡：所有0.45秒；
}
输入：选中+div{
不透明度：1；
能见度：可见；
}

HTML

---

尝试

可见性

和

位置

而不是

显示

div{
不透明度：0；
宽度：50px；
高度：50px；
过渡：所有3s；
背景色：黑色；
可见性：隐藏；
位置：绝对位置；
}
输入：选中+div{
能见度：可见；
位置：相对位置；
不透明度：1；
}

空格

我需要你的要求。我添加了另一个答案。对不起，没有。我不需要更改背景，我需要平滑地显示块。您可以使用

可见性：隐藏而不是
显示：无，顺便说一下，我已经更新了我的答案，请现在查看
<input type="checkbox"  name="name" id="name" />

<div id="animation">
   test
</div>

$('#animation').hide();

$('#trending').click(function(){
    $('#animation').fadeToggle();
})

<input type="checkbox" id="toggle">
<div class="overlay"> 
    <label for="toggle">Click to deactivate</label>
</div> 

label {
    cursor: pointer;
}
.overlay {
    opacity: 0;
    transition: opacity ease-in 0.6s;
}
#toggle:checked ~ .overlay {
    opacity: 1;
}