Пульсирующий текст с задержкой - PullRequest
Новая
       47

Пульсирующий текст с задержкой

0 голосов
/ 16 января 2020

Я не знаю, как реализовать код для пульсирующего текста с задержкой. У меня есть фоновое изображение и над ним, у меня есть 2 разных текста, которые появляются в разное время. 1-й текст в порядке, но со вторым у меня есть проблема, когда я не знаю, как заставить его пульсировать с задержкой появления.

Код: 

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

Спасибо всем За вашу помощь заранее.

1 Ответ

0 голосов
/ 17 января 2020

Вот скрипка, которая, я думаю, дает вам решение после: https://jsfiddle.net/v1pm2y8f/3/

У вас было несколько синтаксических ошибок, которые нужно было исправить, но основные отличия были в том, как установить непрозрачность до 0 при запуске и использовании animation-fill-mode: forwards; для сохранения значений анимации после завершения fadein.

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