有延迟的脉动文本答案

【问题标题】：Pulsating text with delay有延迟的脉动文本
【发布时间】：2020-01-17 08:09:58
【问题描述】：

我不知道如何实现延迟脉动文本的代码。我有一个背景图像，在它上面，我有 2 个不同的文本出现在不同的时间。第一个文本还可以，但是第二个文本出现了一个问题，我不知道如何使它出现延迟。

代码：

<?php 


?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
  /*https://dynamicwallpaper.club/landing-vids/1.png*/
  height: 100%; 
  /* Center and scale */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/*still to use for wellcome*/
#test {
    margin-top: 25px;
    font-size: 8rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)

    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#test2 {
    margin-top: 150px;
    font-size: 2rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)


    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 5s;
            animation-delay: 5s;
}/* This was missing*/

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

</style>
</head>
<body>
<a href="skills.php">
  <div class="bg tekst_slika">
    <div id="test" class="centered">WELLCOME</div>
    <div id="test2" class="centered">>> Press here to start <<</div>
  </div>
</a>

</body>
</html>

提前感谢大家的帮助。

【问题讨论】：

您的代码中有syntax 错误。最后一个大括号没有闭合。

标签： html css delay pulse

【解决方案1】：

这是一个我认为可以为您提供解决方案的小提琴：https://jsfiddle.net/v1pm2y8f/3/

您有几个需要修复的语法错误，但主要区别在于启动时将不透明度设置为 0 和使用 animation-fill-mode: forwards; 在淡入淡出完成后保留动画值。

HTML

<div class="bg tekst_slika">
  <div id="test" class="centered">WELCOME</div>
  <div id="test2" class="centered">>> Press here to start <<</div>
</div>

CSS

body, html {
 height: 100%;
 margin: 0;
}

.bg {
  background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
  /*https://dynamicwallpaper.club/landing-vids/1.png*/
  height: 100%; 
 /* Center and scale */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

/* Centered text */
.centered {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: white;
}

#test,
#test2 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*still to use for wellcome*/
#test {
  margin-top: 25px;
  font-size: 8rem;
  opacity: 0;

  -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
        animation: fadein 5s;
        animation-fill-mode: forwards;
}

@keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

#test2 {
   margin-top: 150px;
   font-size: 2rem;
   opacity: 0;

   -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
        animation: fadein 5s;
        animation-delay: 5s;
        animation-fill-mode: forwards;

}

@keyframes fadein {
 from { opacity: 0; }
 to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
 from { opacity: 0; }
 to   { opacity: 1; }
}

【讨论】：

谢谢 :) 有没有办法让这个文本随着淡入/淡出效果跳动？我正在考虑制作一个循环，但如果可能的话，我想知道。
@TimTim 请看以下内容：jsfiddle.net/47yfotdm/2
非常感谢迪伦
@TimTim 如果您对此解决方案感到满意，您是否介意接受它作为结束问题的答案:)