Блог

Главная - Вопросы по программированию - Градиент на тексте, вызывающий неправильное отображение анимации ключевого кадра

Градиент на тексте, вызывающий неправильное отображение анимации ключевого кадра

#css #gradient #keyframe

#css #градиент #ключевой кадр

Вопрос:

Я пытаюсь анимировать некоторый текст, на котором есть градиент. Я использую простой ключевой кадр 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>

Комментарии:

1. проверено в Chrome на компьютере Mac.. работает нормально

2. Просто попробовал chrome сам, и это сработало. Это проблема Firefox?

3. попробуйте добавить -moz- префикс в свою анимацию

4. Похоже, это не сработало. Похоже, мне нужно добавить анимацию в родительский класс, который содержит текст. Firefox, похоже, не анимирует и не обрезает одновременно