Jquery在12秒后显示CSS li

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秒来实现。Bellow代码将为您工作。

​

.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>

​