CSS szöveges animációt akadozva játssza le mobilon

Sziasztok!

Elég rejtélyes hibába ütköztem.
Adott egy css zoom effekt, amiben egy szót kicsinyítek le.
Ha a zoom effekt indulásakor a szó szélessége szélesebb mint a kijelző akkor nem akadozik.
Ha kisebb mint a kijelző szélessége akkor igen.

Asztali gépen minden rendben van.

.fade-out {
  animation: fadeOut ease-out 3s;
  -webkit-animation: fadeOut ease-out 3s;
  -moz-animation: fadeOut ease-out 3s;
  -webkit-animation-fill-mode: forwards;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
position: absolute;
font-size: 0px;
}

@keyframes fadeOut {
  0% {
    opacity:0;
font-size: 250px;
top:150px;
color: #f0f0f0;
  }
  100% {
    opacity:1;
 font-size: 50px;
 top:100px;
color: #6688e0;
  }
}


<div class=fade-out>programozás</div>