动画：CSS3中目标事件上的目标元素

我正在基于CSS3选择器

：target构建一个lightbox，它根据url中的哈希选择一个元素。我想在
：target
事件上设置目标元素的动画，但这似乎不起作用

假设我们有一个div
#banana，当按下指向
#banana
的链接时，它会显示出来

#banana {display: none;}
#banana:target {display: block;}

这个很好用。但是当尝试为元素设置动画时，这不起作用。看

这种元素不会褪色。这就像浏览器跳过动画并立即触发最终结果一样。
问题在于您正在更改
显示属性。
显示
属性无法转换，因为您无法真正设置元素从零变为块的动画

display
属性可以完全省略。但是，您需要为元素设置可见性：隐藏，这样它就不会阻止链接被单击，然后将其转换为可见性：可见：

div#banana{
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
不透明度：0；
过渡：不透明度5s线性1s；
可见性：隐藏；
}
香蕉分区：目标{
不透明度：1；
能见度：可见；
}

无法设置显示属性的动画。在
none
和
block
之间没有渐进的阶段

在您的例子中，您可以通过使用巨大的负顶部位置来“隐藏”元素，并在目标事件中将其恢复为
0
。实际过渡将通过更改不透明度来处理


div#banana{
位置：固定；
左：0；
顶部：-1000px；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
不透明度：0；
过渡：不透明度1s线性；
}
香蕉分区：目标{
排名：0；
不透明度：1；
}

删除无法设置动画的显示属性。显示从一个状态切换到另一个状态的状态。不透明度在0.00到1.00之间很好有很多步骤哦，愚蠢的错误！使用
visibility
和负
z-index
之间有什么明显的区别吗？@Bram Vanroy:我意识到你在实现一个lightbox-大概div需要覆盖页面的其余部分来关注lightbox项。如果z指数为负数，则无法达到此目的。考虑到
z指数
是数字且可以设置动画，我是否可以简单地将其与不透明度从
-1
设置为
1000
？实际上，您可能可以。我以前从未转换过
z-index
，因此我无法进一步评论。只是确认一下：
visibility
以及
z-index
动画制作工作完美无瑕。
div#banana {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 5s linear 1s;
}

div#banana:target {
    display: block;
    opacity: 1;
}