延迟脉动文本

Question

我不知道如何实现延迟脉动文本的代码。我有一个背景图像，在它上面，我有 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>

提前感谢大家的帮助。

Answer 1

这是一个 Fiddle，我认为它可以为您提供解决方案：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; }
}

延迟脉动文本

Pulsating text with delay

html

css

delay

pulse