Qu'est-ce qui fait que les animations de texte CSS tremblent excessivement lors du chargement ?

Question

J'ai essayé toutes les astuces que j'ai pu trouver, mais l'animation est toujours très saccadée. J'ai essayé de suivre quelques conseils sur une autre question où il était recommandé d'utiliser transition 而不是 keyframes 但似乎仅使用 transition Je dois utiliser Javascript, ce que je veux éviter.

Voici le clip :

/* ////////////////// TOP NAV BAR GRID //////////////// */

.grid-container-topnav {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 290px;
    display: inline-grid;
    width: 0px;
    gap: 0px;
    padding: 0px;
    grid-template-columns: repeat(4, minmax(69px, 69px)) 14px;
    grid-template-rows: 32px;
}

.grid-item-topnav {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 16px;
    font-family: Candara Light, Cascadia Code, Courier New, monospace;
    border: solid 1px #272727;
    color: #e4e4e4;
    overflow: hidden;
    opacity: 0;
}

.topnav-item1 {
    grid-column: 1;
    grid-row: 1;
}

.topnav-item2 {
    grid-column: 2;
    grid-row: 1;
}

.topnav-item3 {
    grid-column: 3;
    grid-row: 1;
}

.topnav-item4 {
    grid-column: 4;
    grid-row: 1;
}

.topnav-item1,
.topnav-item2,
.topnav-item3,
.topnav-item4{
    background: linear-gradient(0deg, #303030, transparent) #505050;
    animation-duration: 0.2s;
    transition: 0.2s ease-in-out;
}

.topnav-item1:hover,
.topnav-item2:hover,
.topnav-item3:hover,
.topnav-item4:hover{
    -webkit-box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #6461ff;
    -webkit-transition: 0.25s ease-out;
    display: inline;
    border: solid 1px #6461ff;
    background-color: #6968a7;
}

.topnav-item1:active,
.topnav-item2:active,
.topnav-item3:active,
.topnav-item4:active{
    -webkit-box-shadow: inset 1px 1px 5px #00000013, 1px 1px 8px #e9666699;
    -webkit-transition: 0.25s ease-out;
    display: inline;
    border: solid 1px #e63f3f;
    background-color: #6e6e6e;
}

.topnav-item5 {
    top:0px;
    grid-column: 5;
    grid-row: 1;
    font-family: Arial;
    animation-duration: 0.2s;
    transition: 0.2s ease-in-out;
    color: #cccccc;
    background-color: #9b1e1e;
}

.topnav-item5:hover {
    -webkit-box-shadow: inset 0 5px 5px rgba(0, 0, 0, .075), 0 0 5px #c71e1e;
    border: solid 1px #c71e1e;
    color: #ffffff00;
    background-color: #9b1e1e;
}

.active_tab {
    outline: 0;
    -webkit-transition: 0.25s ease-out;
    display: inline;
    background-color: #6968a7;
}

/* /////// - ONLOAD ANIMATION > CHILD SUBGRID ITEMS - /////// */

.j05 { position: relative; left: 25px; top: -20px; animation: scale-in-item 2s 0s ease-in-out forwards; }
.j04 { position: relative; left: 25px; top: -20px; animation: scale-in-item 2s 0.1s ease-in-out forwards; }
.j03 { position: relative; left: 25px; top: -20px; animation: scale-in-item 2s 0.2s ease-in-out forwards; }
.j02 { position: relative; left: 25px; top: -20px; animation: scale-in-item 2s 0.3s ease-in-out forwards; }
.j01 { position: relative; left: 25px; top: -20px; animation: scale-in-item 2s 0.4s ease-in-out forwards; }

@-webkit-keyframes scale-in-item {
  0% {
    opacity: 0;
    transform: perspective(0px) scale3d(0.1, 0.1, 1) translateZ(0px);
  }

  100% {
    top: 0px;
    left:0px;
    opacity: 1;
    transform: perspective(0px) scale3d(1, 1, 1) translateZ(0px);
  }
}

.no-flickr {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform-style: preserve-3d;
  }

<div class="grid-container-topnav">

<button class="grid-item-topnav topnav-item1 no-flickr j01" id="myItem1" tabindex="-1">Banana</button>
<button class="grid-item-topnav topnav-item2 no-flickr j02" id="myItem2" tabindex="-1">Apples</button>
<button class="grid-item-topnav topnav-item3 no-flickr j03" id="myItem3" tabindex="-1">Oranges</button>
<button class="grid-item-topnav topnav-item4 no-flickr j04" id="myItem4" tabindex="-1">Kiwis</button>
<button class="grid-item-topnav topnav-item5 no-flickr j05" id="myItemX" tabindex="-1"></button>

</div>

Answer 1

Suite à la suggestion de l'utilisateur @JHeth, j'ai ajouté la valeur de localisation à @Keyframes.

transform: perspective(0px) translate3d(-50px, 15px, 0px) translateZ(0px);

Ça a fonctionné. Désormais, l’animation est aussi fluide que de la soie.