Question

所以我有12秒后需要显示的按钮。我没有CSS或Javascrip的经验

我的代码

.btn_waiting {
  visibility: visible;
  opacity: 1;
  transition-delay: 12s;
}

<body>
  <ul class="listdm">
    <li><a href="./21.html" class="btn_waiting">Next</a></li>
    <li><a href="./8.html">Back Step 1</a></li>
    <li><a href="./7.html">Home</a></li>
  </ul>
</body>

有人可以帮助我吗？

Answer 1

使用动画框架的纯CSS解决方案。

@keyframes appear {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

.btn_waiting {
  visibility: hidden;
  animation: appear 0s 12s 1 normal forwards ease-out
}

<body>
  <ul class="listdm">
    <li><a href="./21.html" class="btn btn_waiting">Next</a></li>
    <li><a href="./8.html">Back Step 1</a></li>
    <li><a href="./7.html">Home</a></li>
  </ul>
</body>

Answer 2

可以通过添加关键帧动画效果并将动画时间设置为12秒来实现。波纹管代码将为您效劳。

.btn_waiting {
  visibility: visible;
  animation-name: example;
  animation-duration: 12s;
}

@keyframes example {
  0% {
   opacity:0;
  }
  99% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

<body>
  <ul class="listdm">
    <li><a href="./21.html" class="btn_waiting">Next</a></li>
    <li><a href="./8.html">Back Step 1</a></li>
    <li><a href="./7.html">Home</a></li>
  </ul>
</body>

jQuery在12秒后显示CSS li

2 个答案: