Was führt dazu, dass CSS-Textanimationen beim Laden übermäßig zittern?

Question

Ich habe jeden Trick ausprobiert, den ich finden konnte, aber die Animation ist immer noch sehr unruhig. Ich habe versucht, einige Ratschläge zu einer anderen Frage zu befolgen, bei denen die Verwendung empfohlen wurde transition 而不是 keyframes 但似乎仅使用 transition Ich muss Javascript verwenden, was ich vermeiden möchte.

Das ist der 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

按照用户@JHeth的建议，我将位置值添加到@Keyframes。

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

它成功了。现在动画就像丝绸一样光滑。