Блог

Я хочу, чтобы элемент отображался, а затем исчезал. Затем он должен появиться позже, но эффекта постепенного затухания быть не должно. Элемент должен исчезнуть и вернуться через установленный интервал, и это поведение должно продолжаться бесконечно.

Это то, что у меня есть на данный момент. Я не могу понять, что сломано и не отображает мои цвета и тому подобное. Любая помощь была бы потрясающей!

 .goal-cont {
  color: white;
  background: black;
  opacity: 0;
  height: 100px;
  width: 100px;
  animation: opacityOn 600s normal forwards;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

.blinking {
  animation: blinkingText 10s infinite;
}

@keyframes blinkingText {
  0% {color: #000;}
  50% {color: transparent;}
  99% {color: transparent;}
  100% {color: #000;}
}  

 <div class="blinking" /span>
  <div id='title'></div>
  <div id='goal-bar'>
    <span id='goal-current'>0</span>/<span id='goal-total'>0</span>
  </div>
  <div id='goal-end-date'>
  </div>
</div>  

Вы на правильном пути, для того, что вы хотите.

Есть несколько вещей, о которых вы хотите позаботиться:

• Решите, сколько времени текст должен отображаться?
• Как долго это не должно отображаться?
• Если вы не хотите, чтобы он исчезал, избегайте использования transition свойства в CSS.

Математические вычисления:

Текст появляется для: 5m

Текст исчезает для: 20m

Общая продолжительность анимации: 5m 20m = 25m

Вычисления ключевых кадров CSS:

Ключевые кадры анимации CSS состоят из кадров, основанных на процентах, здесь у нас будет от 0% до 100%.

 25m ---- 100%
05m ----  ?

20% of 100% = 5m of total duration(i.e. 25m)
  

Временные интервалы берутся на основе предположений, вы можете изменить в соответствии с вашими требованиями. Кроме того, мы заменили длительность с minutes на seconds для примера ниже, чтобы нам не нужно было ждать слишком долго при тестировании анимации.

 /*You have not used below class so have put into a comment*/
/*
.goal-cont {
  color: white;
  background: black;
  opacity: 0;
  height: 100px;
  width: 100px;
  animation: opacityOn 600s normal forwards;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}
*/

.blinking {
  animation: blinkingText 25s infinite;
}

@keyframes blinkingText {
  0% {color: #000;}
  20% {color: #000;}
  20.01% {color: transparent;}
  99.99% {color: transparent;}
  100% {color: #000;}
}  

 <div class="blinking" /span>
  <div id='title'></div>
  <div id='goal-bar'>
    <span id='goal-current'>0</span>/<span id='goal-total'>0</span>
  </div>
  <div id='goal-end-date'>
  </div>
</div>  

Надеюсь, это вам как-то поможет.