Html 使用纯CSS显示和消失动画

我在HTML页面上有一个复选框和一个图像：

我希望选中复选框时图像消失，取消选中后图像返回。使用

opacity

属性可以很容易地完成，但这只会隐藏图像–我需要它消失（以便其他元素可以代替图像）。 我尝试将

不透明度

与

显示

属性结合起来：

img{
显示：块；
不透明度：1；
过渡：不透明度0.5s缓进缓出；
}
#复选框：选中~div img{
显示：无；
不透明度：0；
}

---

显示

属性不能转换也不能设置动画。没有它，它工作得很好

img{
不透明度：1；
过渡：不透明度0.5s缓进缓出；
}
#复选框：选中~div img{
不透明度：0；
}

---

“没有它也可以正常工作”-问题是关于以某种方式隐藏元素，使其不再占用空间，并且仅在不透明度的情况下“正常工作”。@CBroe您没有指定显式请求。你希望它做什么？动画不透明和消失（自由空间）在同一时间是不可能的-它应该是什么样子？你可以使用

height

或

translate

或任何东西，但不占用空间不是动画。这不是我的问题。“动画不透明度和消失（自由空间）在同一时间是不可能的”-我猜，动画不透明度第一，消失后，当这是做？看它-