HTML5 анимированный баннер не зацикливается на Android

Question

Меня попросили сделать html5 анимированный баннер для добавления. Все было хорошо, когда интегрированы в веб-сайт, за исключением мобильного Android. Предполагается, что анимация зацикливается, но на Android она может зацикливаться 3 или 5 раз и больше не зацикливаться.

После тестирования на нескольких устройствах мне не удалось найти согласованное поведение.

На некоторых устройствах мы увидим анимацию только один раз, а другие - несколько раз, а затем она остановится.

Вот мой код:

let type;
const app = {
  url: document.querySelector('.url'),
  lms: document.querySelector('.LMS'),
  logo: document.querySelector('.logo'),
  punchline: document.querySelector('.punchline'),
  main: document.querySelector('.main'),
  prefix: ["webkit", "moz", "MS", "o", ""],

  init: () => {
    app.lms.addEventListener("load", app.launchLMS);
  },

  prefixedEvent: (element, type, callback) => {
    for (var p = 0; p < app.prefix.length; p++) {
        if (!app.prefix[p]) { type = type.toLowerCase(); };
        element.addEventListener(app.prefix[p]+type, callback, false);
    }
  },

  launchLMS: () => {
    app.lms.classList.add('LMS--show');
    app.prefixedEvent(app.lms, "TransitionEnd", app.launchLogo);
  },

  launchLogo: () => {
    app.logo.classList.add('logo--show');
    app.prefixedEvent(app.logo, "TransitionEnd", app.launchPunchline);

  },

  launchPunchline: () => {
    app.punchline.classList.add('punchline--show');
    app.prefixedEvent(app.punchline, "AnimationEnd", app.makeItDisappear);
  },

  makeItDisappear: () => {
    app.main.classList.add('main--hide');
    app.prefixedEvent(app.main, "TransitionEnd", app.launchURL);
  },

  launchURL: () => {
    app.url.classList.add('url--show');
    app.prefixedEvent(app.url, "AnimationEnd", () => {
      app.url.classList.remove('url--show');
      window.location.reload();
    });
  },
}

document.addEventListener('DOMContentLoaded', app.init);

body {
  width: 300px;
  height: 250px;
}

#container {
  position: relative;
  height: 250px;
  background: #0ac3a7;
  overflow: hidden;
  cursor:pointer;
}

.main {
  visibility: visible;
}
.main--hide {
  visibility: hidden;
  opacity: 0;
  transition: all 1s 3s ease-in-out;
  -webkit-transition: all 1s 3s ease-in-out; /* Safari 4+ */
  -moz-transition: all 1s 3s ease-in-out; /* Fx 5+ */
  -o-transition: all 1s 3s ease-in-out; /* Opera 12+ */
}

/* Part 1 URL */
.url {
  position: relative;
  visibility: hidden;
  top: 117px;
  right: -5em;
  width: 7.5em;
}

.url--show {
  visibility: visible;
  -webkit-animation: showUrl 3s ease-out; /* Safari 4+ */
  -moz-animation: showUrl 3s ease-out; /* Fx 5+ */
  -o-animation: showUrl 3s ease-out; /* Opera 12+ */
  animation: showUrl 3s ease-out;/* IE 10+, Fx 29+ */
  opacity: 0;
}

@keyframes showUrl {
  25% {opacity: 1;}
  75% {opacity: 1;}
}
@-webkit-keyframes showUrl {
  25% {opacity: 1;}
  75% {opacity: 1;}
}
@-moz-keyframes showUrl {
  25% {opacity: 1;}
  75% {opacity: 1;}
}
@-o-keyframes showUrl {
  25% {opacity: 1;}
  75% {opacity: 1;}
}

/* Part 2 LMS */
.LMS {
  visibility: hidden;
  bottom: 3.5em;
  width: 17.5em;
  position: relative;
  right: -0.5em;
}
.LMS--show {
  -webkit-animation: AnimLMS 2s ease-out; /* Safari 4+ */
  -moz-animation: AnimLMS 2s ease-out; /* Fx 5+ */
  -o-animation: AnimLMS 2s ease-out; /* Opera 12+ */
  animation: AnimLMS 2s ease-out;/* IE 10+, Fx 29+ */
  visibility: visible;
  bottom: -3.3em;
  transition: bottom 0.8s 1.5s ease-in-out;
}

@keyframes AnimLMS {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes AnimLMS {
  from {opacity: 0;}
  to {opacity: 1;}
}
@-webkit-keyframes AnimLMS {
  from {opacity: 0;}
  to {opacity: 1;}
}
@-moz-keyframes AnimLMS {
  from {opacity: 0;}
  to {opacity: 1;}
}
@-o-keyframes AnimLMS {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Part 3 Logo */
.logo::before {
  background: url('../docs/logo.svg') no-repeat;
  content: '';
  height: 100%;
  width: 100%;
  background-size: 100%;
  position: relative;
  display: block;
}
.logo {
  position: relative;
  color: beige;
  height: 2em;
  width: 8em;
  overflow: hidden;
  margin: 0 auto;
  visibility: hidden;
  bottom: 3.5em;
}
.logo--show {
  visibility: visible;
  -webkit-transition: bottom 0.8s 0.3s ease-in-out; /* Safari 4+ */
  -moz-transition: bottom 0.8s 0.3s ease-in-out; /* Fx 5+ */
  -o-transition: bottom 0.8s 0.3s ease-in-out; /* Opera 12+ */
  transition: bottom 0.8s 0.3s ease-in-out;
  bottom: -0.5em;
}

/* Part 4 Punchline */
.punchline {
  position: relative;
  visibility: hidden;
  top: 3em;
  width: 17.5em;
  right: -0.6em;
}

.punchline--show {
  visibility: visible;
  -webkit-animation: AnimPunchline 0.8s ease-in-out; /* Safari 4+ */
  -moz-animation: AnimPunchline 0.8s ease-in-out; /* Fx 5+ */
  -o-animation: AnimPunchline 0.8s ease-in-out; /* Opera 12+ */
  animation: AnimPunchline 0.8s ease-in-out;/* IE 10+, Fx 29+ */
  -webkit-transition: top 0.5s ease-in-out; /* Safari 4+ */
  -moz-transition: top 0.5s ease-in-out; /* Fx 5+ */
  -o-transition: top 0.5s ease-in-out;/* Opera 12+ */
  transition: top 0.5s ease-in-out;
  top: 1.5em;
}

@keyframes AnimPunchline {
  from {opacity: 0;}
  to {opacity: 1;}
}
@-webkit-keyframes AnimPunchline {
  from {opacity: 0;}
  to {opacity: 1;}
}
@-moz-keyframes AnimPunchline {
  from {opacity: 0;}
  to {opacity: 1;}
}
@-o-keyframes AnimPunchline {
  from {opacity: 0;}
  to {opacity: 1;}
}

<!DOCTYPE html>
<html><head>
        <meta charset="utf-8">
        <meta name="ad.size" content="width=300,height=250">
        <title>Bannière</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">

    </head>
    <body>

        <div id="container">
            <img class="url" src="docs/image2.png" alt="hello.io" />
            <div class="main">
                <div class="logo">Coucou</div>
                <img class="punchline" src="docs/image1.png" alt="punchline" />
                <img class="LMS" src="docs/salut.png" alt="salut">
            </div>
        </div>

    <script src="js/app.js"></script>

</body></html>

Я должен добавить, что я использую reset.css.

Спасибо, ребята, за вашу помощь;)