javascript - 如何在延迟效果上应用平滑的淡入淡出

我想知道是否有人可以提供解决此问题的方法，对不起，我只是CSS的初学者。
基本上，我有一个登录页面，其中有youtube视频在后台播放，并且有一些按钮在8秒钟后出现。这些按钮我希望它们可以通过淡入淡出。我不知道该怎么做，而我目前使用的CSS片段是

.cover .btn-lg {
  animation: cssAnimation 0s 8s forwards;
 visibility: hidden;
  padding: 15px 50px;
  font-weight: bold;
}

@keyframes cssAnimation {
  to   { visibility: visible; }
}

我可以在什么地方和什么地方进行更改以获得所需的效果，因此，不仅仅是显示它-我希望它平滑地消失。

最佳答案

.cover .btn-lg {
  animation: cssAnimation 13s linear;
  padding: 15px 50px;
  font-weight: bold;
}

@keyframes cssAnimation {
  0%{
    opacity: 0;
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

<div class="cover">
   <button class="btn-lg">Button</button>
</div>