Эффект zoomIn (Animate. css) имеет быстрое увеличение sh элемента до его исчезновения и увеличение

Question

У меня есть изображение, которое я хотел увеличить на странице refre sh. Изображение расположено в самом верху страницы. Когда вы открываете страницу с другой веб-страницы, изображение появляется на долю секунды, исчезает, а затем увеличивается, как и положено элементу. Как сделать так, чтобы за доли секунды изображение вообще не показывалось, а просто увеличилось изображение с непрозрачностью 0?

Вот мой код для этого проекта:

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

<div class="Header-Image-Container rellax">
  <img src="images/Calibrator_Logo_Text_NoBackground.png" alt="Header Picture" class="Header-Image 
    wow zoomIn" data-wow-duration="3s" />
</div>

Вот ссылка на реальный сайт, где у меня возникла проблема: www.calibrator.ca/TestSite. Я просто пытаюсь, чтобы изображение начиналось с непрозрачности 0, а затем увеличивалось до 1. Для меня это выглядит так, как будто код css достиг бы sh этого, но когда он рендерится в chrome и firefox, он имеет этот флаг sh изображения, прежде чем он исчезнет. Любая помощь приветствуется.

Answer 1

Если есть какая-либо задержка между рисованием загруженного изображения и началом анимации (вероятно), изображение будет видимо в течение короткого промежутка времени, вызывая видимую вспышку sh. Решение состоит в том, чтобы стилизовать изображение с visibility: hidden в начале, а затем установить visibility на visible в качестве первого кадра вашей анимации (или использовать JavaScript, чтобы сделать его видимым). (В качестве альтернативы вы могли бы изначально стилизовать изображение как opacity: 0, но затем вы могли бы также увидеть не масштабированное изображение в течение доли секунды в начале, так что вам нужно будет также сначала стилизовать это; вероятно, проще начать с visibility: hidden.)

Кстати, с написанным кодом вы также рискуете анимацией, происходящей за до загрузки изображения (то, что вы могли не заметить при быстром соединении и кэшированное изображение). Если это произойдет, ваша анимация будет практически невидима для пользователей. Решением будет только добавить класс анимации (zoomIn) к вашему изображению после того, как событие load будет запущено. (В идеале вы должны прикрепить обработчик load к изображению, используя addEventListener(), но вы также можете сохранить его простым и использовать атрибут onload непосредственно в теге <img>.)