Как сделать анимацию блика с помощью SVG или GIF

[WebMachine]

Всем привет.
В общем стоит задача, хотим сделать логотип без заднего фона, с анимацией блика.

В svg не шарим, но есть пример Того что мы хотим:
http://pr-demo.96.lt/demo/animate/123.html

Мы пробовали на gif но качество ужасное получается..
А если использовать метод движения полосы то полоса накладывается и на фон.. А нам нужно чтобы блик проходил только по логотипу.. Как в примере..
Можете посоветовать подходящее решение?

[laimas]

А на css? В сети уже готовых примеров эффектов с текстом на css много.

[MallSerg]

Если оптика то нужно что то навроде такого ставить
https://stemkoski.github.io/Three.js/Bubble.html

[WebMachine]

А на css? В сети уже готовых примеров эффектов с текстом на css много.

на css не получится.. так как полоса блика будет обтекать и сам фон.. а для задуманного эффекта нужно чтобы он обтекался по логотипу а не по фону..
Пример: http://pr-demo.96.lt/demo/animate/index.html

[laimas]

на css не получится.. так как полоса блика будет обтекать и сам фон..

С чего вдруг:

<style>
.a {
  position: relative;
  font: 32px Arial;
  font-weight: bold;
  color: #AA0101;
}
.a:after {
  content: "";
  position: absolute; top: 0; left: -2em;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(255,255,255,.0), rgba(255,255,255,.8), rgba(255,255,255,.0)) no-repeat -2em 0%;
  background-size: 2em 100%;
  animation-duration: 3s;
  animation-name: slide;
  animation-iteration-count: infinite;
}

@keyframes slide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  }
}
</style>

<div class="a">TEXT</div>

PS. Проблема с подбором градиента к фону, но можно же скомбинировать с маской.

[WebMachine]

С чего вдруг

https://jsfiddle.net/Georka/bxy3kae6/1/
Дело в том что логотип должен быть прозрачным а значит полоса блика должна проходить исключительно по самому логотипу не выходя за них. Иначе полоса будет видна на фоне и сама суть в этом уже теряется.

[laimas]

Прозрачный, в смысле видна подложка под ним?

[WebMachine]

laimas, тут: http://pr-demo.96.lt/demo/animate/123.html

Во время проигрывания анимации всех изображений (а их 17) они будто частично на милисекунды исчезают и снова появляются.. как сделать чтобы до окончательной загрузки всех 17 изображений показывался первый png рисунок.. чтобы далее пошла гладкая анимация?

Тоесть код, в начале загружает 1 png рисунок и отображает его до тех пор пока не загрузятся все остальные а далее начинает показывать их по дорожке.. И важно чтобы можно было цикличность задавать, т.е скорость проигрывания к примеру 10 мсек после каждого изображения и общую паузу, т.е после последнего изображения должно стоять 5 сек задержка до начала очередного проигрывания..

[laimas]

Нужно сначала загрузить изображения (кешировать), и только потом запускать анимацию.

И все таки, что значит логотип прозрачный? Не видно по ссылке такого. Может все таки background-clip: text и анимация градиента подложки?

[WebMachine]

Логотип лежит на фоновом изображении. поэтому фон логотипа должен быть прозрачным.. png