Javascript 设置按钮动画的问题

我对按钮的动画制作有一些问题。首先，我让按钮在窗口加载以下代码后出现：

$（窗口）.on（'load'，（）=>{
//console.log（“内容加载”）
$（'.button'）.delay（1000）.fadeIn（3000）
});

这是我想要的，在1秒后消失。然后我做了一些CSS：

.wrapper {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  bottom: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}

.button {
  display: none;
  background-color: rgba(255, 255, 255, 0.2);
  background-repeat:no-repeat;
  width: 150px;
  padding: 20px;
  color: #000; 
  border: 3px solid rgb(48, 48, 48);
  border-radius: 20px 20px 20px 20px;
  margin:0 5px;
  transition: ease 1s;
}

.button:hover {
  background-color: rgba(255, 255, 255, 0.5);
  border: :3px solid rgb(35, 35, 35);
  border-radius: 10px 10px 10px 10px;
  transition: ease 1s;
}

我有一个HTML：

<div class="wrapper">
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
</div>


例1
例1
例1
例1
例1

使用此CSS，按钮不再淡入，仅在1秒后弹出。你知道这是什么原因吗？或者我做了什么蠢事（可能是D）

如果你能帮忙，谢谢你
 所有按钮元素都具有相同的id值。每个元素的Id应该是唯一的。
我对js做了一个小改动。希望这是你想要的


$（文档）.ready（函数（）{
console.log（“内容加载”）
$（'.button'）.fadeIn（'slow'）；
$（'.button'）.fadeIn（3000）；
});
.wrapper{
位置：绝对位置；
最高：50%；
宽度：100%；
文本对齐：居中；
底部：0；
右：0；
对齐项目：居中；
证明内容：中心；
}
.按钮{
显示：无；
背景色：rgba（255、255、255、0.2）；
背景重复：无重复；
宽度：150px；
填充：20px；
颜色：#000；
边框：3倍实心rgb（48,48,48）；
边界半径：20px 20px 20px 20px；
利润率：0.5px；
过渡：轻松1s；
}
.按钮：悬停{
背景色：rgba（255、255、255、0.5）；
边框：3倍实心rgb（35,35,35）；
边界半径：10px 10px 10px 10px；
过渡：轻松1s；
}

例1
例1
例1
例1
例1
尝试使用不透明度：


$（文档）.ready（函数（）{
$（'.button'）.delay（1000）.fadeTo（“slow”，1）；
});
.wrapper{
位置：绝对位置；
最高：50%；
宽度：100%；
文本对齐：居中；
底部：0；
右：0；
对齐项目：居中；
证明内容：中心；
}
.按钮{
不透明度：0；
显示：无；
背景色：rgba（255、255、255、0.2）；
背景重复：无重复；
宽度：150px；
填充：20px；
颜色：#000；
边框：3倍实心rgb（48,48,48）；
边界半径：20px 20px 20px 20px；
利润率：0.5px；
转换：1s易入易出；
}
.按钮：悬停{
背景色：rgba（255、255、255、0.5）；
边框：3倍实心rgb（35,35,35）；
边界半径：10px 10px 10px 10px；
过渡：轻松1s；
}

例1
例1
例1
例1
例1
我知道，我这样做是为了复制粘贴按钮并查看动画效果。这些按钮还没有功能。刚刚把它删掉了！这就是我想要的动画，在它淡入后，但我真的很喜欢制作它，这样它就不会显示，在几秒钟后淡入。但你真的很接近！你能再严厉一点吗；我错过了什么？让我这样说：1。延迟1秒2后显示按钮。然后按钮悬停动画需要工作，但是您的代码在延迟1秒后没有显示按钮，我和您有相同的问题。但还是要感谢你抽出时间！是的，我刚刚发现，
转换：1s易入易出导致我的代码出现问题。但是你使用不透明度的解决方案非常有效！谢谢你的时间，真的帮了我的忙！你很好