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

Question

我想知道是否有人可以为我遇到的这个问题提供解决方案，抱歉，我只是 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; }
}

我可以在哪里改变什么来获得我想要的效果，而不是它只是出现 - 我希望它平滑地淡入。

Answer 1

Transition

Opacity

这两个一起可以实现您想要的淡入淡出效果。它将默认隐藏，将类 .show 添加到您的元素以开始转换。

.cover .btn-lg {
  transition: opacity 8s;
  opacity: 0;
  padding: 15px 50px;
  font-weight: bold;
}

.cover .btn-lg .show {
  transition: opacity 8s;
  opacity: 1;
}