iOSに於いてtransitionがZ軸移動のみ効かない.

Question

以下のようなJavaScriptコードを書いたのですが,iOS(システムバージョン13.4.1)に於いてtransitionがZ軸移動のみ効きません.
x軸方向に10%,y軸方向に10%,5秒間かけて移動した後,z軸方向へ一瞬で移動します.
具体的には,
こちらのcodepenのような処理とほぼ同じです.

試しに,translateZ(-1000px)のみで試したのですが,
そうすると5秒間停止した状態が続いた後,-1000px移動するような処理がなされます.
つまりtransition自体,translate3d若しくはtranslateZそれ自体は効いているのですが,
「時間をかけながら移動する」,「5s間かけて移動する」という,本来期待する挙動になりません.

これはOSの問題でしょうか?
それともサイトの情報量が多い所為（画像を多く含んでいるだとか)でしょうか?
それともCSS,JavaScript(etc)側の問題なのでしょうか?
或いはこちら側のコードに問題があるのでしょうか?

補足情報として
先に貼ったlinkの内容のように,Z軸方向に引っ込んでいる要素が,
buttonをクリックすると要素が迫ってきたり,引っ込んだりするという処理をしているのですが,
translate3d(X%,Y%,-Zpx)からZの値が0pxになる,つまり迫ってくるような処理は,transitionが効いています.
またこの5秒間の間,処理が終了する前にbuttonをクリックすると,また元の状態に戻ります.transitonは効いています.
ただこの処理が5秒かけ,きっちり終わった後に,buttonをクリックすると
transitionが効かない上に記したような状態になります.

先のcodepenをiOSから見ると,それらは正常に動作します.

$('.inner').css({
transition: '5s',
transform: 'translate3d(10%,10%,-1000px)'
})

<div class='outer'>
  <div class='inner'>
  </div>
</div>

.outer{
 perspective: 500px;
 perspective-origin: top left;
 width: 100vw;
 height: 100vh;
}
.inner{
 width:100%;
 height: 100%;
}