javascript - 如何使<p>标签在X时间出现并在X时间消失

我试图让用户在网站上停留1分钟后出现文本，并在2秒后消失。

我知道如何使其淡出：

setTimeout(fade_out, 2000);

function fade_out() {
  $("#msg").fadeOut().empty();
}

但我需要帮助使其淡入。

我不太了解JS，因此请尝试提供一个示例。

最佳答案

jQuery可能是最简单的答案，但是您也可以使用纯CSS Animations来实现，而无需任何JavaScript。

HTML：

<p id="element">P IS SHOWN</p>

CSS：

#element {
  padding: 50px;
  background: red;
  color: white;
}

#element {
    -moz-animation: cssAnimation 64s ease-in;
    /* Firefox */
    -webkit-animation: cssAnimation 64s ease-in;
    /* Safari and Chrome */
    -o-animation: cssAnimation 64s ease-in;
    /* Opera */
    animation: cssAnimation 64s ease-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
  0%   {opacity: 0;display:none;}
  /* 59 sec : start fading in*/
  92%   {opacity: 0;display:block;}
  /* 60 sec : visible */
  94%   {opacity: 1;display:block;}
  /* 62 sec : start fading out */
  97%   {opacity: 1;display:block;}
  /* 63 sec : not visible */
  99%   {opacity: 0;display:block;}
  /* 64 sec */
  100%   {opacity: 0;display:none;}
}

这是一个小提琴（持续6秒）：DEMO

关于javascript - 如何使<p>标签在X时间出现并在X时间消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37799242/