Показать текст после CSS анимации завершена - PullRequest
Новая
       0

Показать текст после CSS анимации завершена

0 голосов
/ 01 февраля 2020

Я не думаю, что дважды опубликовал, но если я это сделал, извините.

У меня проблема с моим кодом CSS: я хочу, чтобы второй текст отображался после завершения первой анимации.

Таким образом, это будет что-то вроде:

Первая анимация запускается, второй текст скрыт, затем первая анимация закончена, а затем показан второй текст. Я думаю, что проблема связана с мигающей анимацией (second_text_anim)

Вот мой HTML код: 

* {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

body {
  background: white;
}

.container {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.container span {
  text-transform: uppercase;
  display: block;
}

.first_text {
  color: white;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background: black;
  position: relative;
  animation: first_text_anim 3s 1;
}


/* The second text should be displayed at the
end of the first animation */

.second_text {
  font-size: 30px;
  color: darkcyan;
  display: block;
  animation: second_text_anim 1s 3s linear infinite;
}

@keyframes first_text_anim {
  0% {
    color: black;
    margin-bottom: -40px;
  }
  30% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85% {
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
}

@keyframes second_text_anim {
  50% {
    opacity: 0;
  }
}
<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>Animation Text</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">
    <span class="first_text">First animation</span>
    <span class="second_text">Second animation, should be displayed at the end </span>
  </div>



</body>

</html>

Ответы [ 2 ]

2 голосов
/ 01 февраля 2020

Ваш animation-delay работает, но вам также нужно установить animation-fill-mode.

Кроме того, измените 50% на from для второго заголовка, чтобы он установил его начальное состояние opacity: 0;.

И последнее: чтобы включить мигающую анимацию, добавьте alternate к сокращению.

Это конечный результат: 

*{
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}
body{
  background:white;
}
.container{
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
.container span{
  text-transform: uppercase;
  display: block;
}
.first_text{
  color: white;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background: black;
  position: relative;
  animation: first_text_anim 3s 1;
}
/* The second text should be displayed at the end of the first animation */
.second_text{

  font-size: 30px;
  color: darkcyan;
  display: block;
  animation:second_text_anim 1s 3s linear infinite alternate both;

}

@keyframes first_text_anim {
  0%{
    color: black;
    margin-bottom: -40px;
  }
  30%{
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85%{
    letter-spacing: 8px;
    margin-bottom: -40px;
  }

}

@keyframes second_text_anim {
  from {
    opacity: 0;
  }
}
<div class="container">
  <span class="first_text"> > First animation </span>
  <span class="second_text"> > Second animation, Should be displayed at the end </span>
</div>
0 голосов
/ 01 февраля 2020

вы можете использовать animation-delay. здесь код, который повторяет второй текст каждые 3s

, также этот порядок значений не является правильным: 

animation:second_text_anim 1s 3s linear infinite;

в коротком методе анимации вы должны упорядочить значение, как в этом примере: 

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div {
  animation: example 5s linear 2s infinite alternate;
}

поэтому в вашем коде вы должны использовать его так: 

animation:second_text_anim 3s linear 4s infinite;


*{
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}
body{
  background:white;
}
.container{
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
.container{
  text-transform: uppercase;
}
.first_text{
  color: white;
  font-size: 60px;
  font-weight: 700;
  letter-spacing: 8px;
  margin-bottom: 20px;
  background: black;
  position: relative;
  animation: first_text_anim 3s 1;
}
/* The second text should be displayed at the end of the first animation */
.second_text{
  font-size: 30px;
  color: darkcyan;
  display: block;
  opacity:0;
  animation:second_text_anim 3s linear 4s infinite;
  

}

@keyframes first_text_anim {
  0%{
    color: black;
    margin-bottom: -40px;
  }
  30%{
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85%{
    letter-spacing: 8px;
    margin-bottom: -40px;
  }

}

@keyframes second_text_anim {
  50% {
    opacity: 1;
  }
}
<!DOCTYPE html>


<html>
  <head>
    <meta charset="utf-8">
    <title>Animation Text</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

<div class="container">
  <span class="first_text"> > First animation < </span>
  <span class="second_text"> > Second animation, Should be displayed at the end < </span>
</div>



  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...