Why doesn't the animation work the first time in mobile Safari?

Question

css

Everywhere the animation works perfectly, the problem is only in the mobile safari.
Here on this site on the main page, scroll down to the choice of iPhone or iPad and select one thing. Choose the device model, you should be transferred to the next step. In theory, after .5s, the "Finish" button should appear there. This happens everywhere, but not in mobile safari. But if you click on the first step and then return to the second one, the animation will work. Also, if you just refresh the page, then the animation will also work the first time.
The animation does not work the first time, only if you go to the selection page from the Main. In all other cases, the animation works correctly.
Here is the animation code in case you need it:

#step2 .problem {

  -webkit-animation-duration: .5s;
          animation-duration: .5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: showTiket;
          animation-name: showTiket;
  -webkit-animation-delay: .5s;
          animation-delay: .5s; }

@-webkit-keyframes showTiket {
  0% {
    bottom: -170px; }
  100% {
    bottom: 0%; } }

@keyframes showTiket {
  0% {
    bottom: -170px; }
  100% {
    bottom: 0%; } }

I tried using bottom: 0%;, bottom: 0;, bottom: 0px;.

Answer 1

The solution was to replace bottomwith transform: translateY.