Градиент текста, приводящий к некорректной визуализации анимации ключевых кадров. - PullRequest
Новая
       1

Градиент текста, приводящий к некорректной визуализации анимации ключевых кадров.

0 голосов
/ 08 апреля 2019

Я пытаюсь анимировать текст с градиентом.Я использую простой ключевой кадр CSS, чтобы ввести его и изменить непрозрачность.

Как бы то ни было, текст с градиентом не полностью отображается после завершения анимации.Иногда прозрачность не работает полностью.

Я включил теги h1 и h2.Тег h1 - это текст с проблемой, h2 - чтобы показать, как он должен выглядеть без проблем с градиентом

Вот ссылка на ручку: https://codepen.io/anon/pen/jRMKBQ

Код также ниже 

@keyframes text {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.text {
  transform: translateY(100px);
  opacity: 0;
  animation: text 1s ease forwards;
}

h1 {
  text-align: center;
  font-size: 4rem;
  color: black;
  padding: 20px 0px;
  font-weight: bold;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-image: linear-gradient(90deg, #e64c4c 0%, #ef32fb 100%);
}

h2 {
  text-align: center;
  font-size: 4rem;
  color: black;
  padding: 20px 0px;
  font-weight: bold;
}
<h1 class="text">Explore some of our recent work</h1>

<h2 class="text">Explore some of our recent work</h2>
...