如何将CSS转换应用于响应菜单？

我创建了一个小的响应菜单

它的工作原理和我想要的一样

然而，我希望菜单能够真正地转换出来，而不是立即发生

我试着加上

    #nav:target > ul
    {
        display: block;
        transition: display 2s linear;

    }

但这不起作用。我也试过了

    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
        display: inline-block;
        transition: display 2s linear;
    }

我又一次失败了

我将如何实现这一点

给你：

将“显示”属性更改为“不透明度”，并将其设置为0

#nav > ul {
    opacity: 0;
}

然后又添加了一个过渡：

过渡：不透明度1s线性

针对目标：

#nav:target > ul {
    opacity: 1;
}

无法转换
显示
属性。您需要将
不透明度
设置为0，并转换
不透明度
值您可以编辑我的小提琴来给我看一个例子吗？太棒了，谢谢！有什么建议可以让我在哪里学习CSS转换吗？CSS技巧总是很好的。