Apakah yang menyebabkan animasi teks CSS menjadi keterlaluan semasa dimuatkan?

Question

Saya mencuba setiap helah yang saya temui, tetapi animasinya masih sangat bergelora. Saya cuba mengikuti beberapa nasihat mengenai soalan lain yang disyorkan untuk digunakan transition 而不是 keyframes 但似乎仅使用 transition Saya perlu menggunakan Javascript yang saya ingin elakkan.

Ini klipnya:

/* ////////////////// 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

Mengikuti cadangan pengguna @JHeth, saya menambah nilai lokasi pada @Keyframes.

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

Ia berkesan. Kini animasinya licin seperti sutera.