我需要添加一些延迟，以使按钮显示出来

问题描述

我需要为“功能”添加一些延迟，这是针对我正在运行的网站，并且该按钮已经存在，我只更改其可见性。我已经尝试了很多东西，但是没有用。第一个步骤是使按钮不可见，第二个步骤是使按钮可见，其想法是在它们之间添加一些代码，以增加此延迟。 代码如下：

body.page-id-2090 #button{
    visibility: hidden;
}
body.page-id-2090 #button{
    visibility: visible;
}

解决方法

您可以使用animation-delay

button {
  animation: show 0s both;
  /* show after 2 seconds */
  animation-delay: 2s;
}


@keyframes show {
  from {
    visibility: hidden;
  }
  
  to {
    visibility: visible;
  }
}

<p>User agreements: Lorem ipsum dolor sit amet consectetur,adipisicing elit.</p>
<button>I agree</button>