Marquee effect in Ionic

I'm trying to get a marquee like effect in ionic, where the text scrolls automatically across the screen. It works smoothly on web simulator, but once I load onto iPhone, the automatic scrolling becomes extremely choppy and not smooth at all. I was wondering if there is a fix to this, or if there's a native ionic component that supports a similar feature.

At the moment, I'm just simply using the marquee tag, I understand its deprecated, but I can't find an alternative. I've seen the ionic-marquee plugin someone made, but it only supports text, whereas I am scrolling more than just text. Using Angular with typescript, prefer no jQuery.

Thank you for your help!

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

edit: I've tried using CSS animation, but it just overlaps all the ngfor elements ontop of each other.

.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%); }
 }