是什么导致 CSS 文本动画在加载时过度颤抖？

Question

我尝试了所有能找到的技巧，但动画仍然很不稳定。 我尝试遵循关于另一个问题的一些建议，其中建议使用 transition 而不是 keyframes 但似乎仅使用 transition 我需要使用我想避免的Javascript。

这是片段：

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

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