Эффект Marquee в Ionic

Question

Я пытаюсь получить эффект выделения в ионном, когда текст автоматически прокручивается по экрану. Он работает плавно на веб-симуляторе, но после загрузки на iPhone автоматическая прокрутка становится чрезвычайно прерывистой и совсем не плавной. Мне было интересно, есть ли исправить это, или есть нативный ионный компонент, который поддерживает аналогичную функцию.

В настоящее время я просто использую метку выделения, я понимаю, что она устарела, ноЯ не могу найти альтернативу. Я видел плагин ionic-marquee, который кто-то сделал, но он поддерживает только текст, тогда как я прокручиваю больше, чем просто текст. Используя Angular с машинописью, не предпочитайте jQuery.

Спасибо за вашу помощь!

<div class = "example1">
        <div class = "horizontalWSpace">
              <div  *ngFor ="let category of categories">
                  <h3 (click)="searchKeyword(category)" >{{category}} </h3>
            </div>
          </div>
      </div>

edit: я пробовал использовать CSS-анимацию, но она просто перекрывает все элементы ngfor поверхдруг друга.

.horizontalWSpace {
  display: flex;
  justify-content: space-between;
  margin-top:20px;
}

.example1 {
  height: 50px; 
  overflow: hidden;
  position: relative;
 }
 .example1 h3 {
  color: white;
  background-color:black;
  padding-left:12px;
  padding-right: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin: 5px;

  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  /* Starting position */
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);   
  transform:translateX(100%);
  /* Apply animation to this element */ 
  -moz-animation: example1 5s linear infinite;
  -webkit-animation: example1 5s linear infinite;
  animation: example1 5s linear infinite;
 }
 /* Move it (define the animation) */
 @-moz-keyframes example1 {
  0%   { -moz-transform: translateX(100%); }
  100% { -moz-transform: translateX(-100%); }
 }
 @-webkit-keyframes example1 {
  0%   { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(-100%); }
 }