Why is this CSS text animation on load trembling so much? - html

Question

I tried every trick I could find but still, the animation is jerky.
I tried following some advice on another question where it was advised to use transition instead of keyframes but it seems that with transition only I'd need to use Javascript which I want to avoid.
Here is the snippet:
/* ////////////////// 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

As user #JHeth suggested, I added the position values to the #Keyframes.
transform: perspective(0px) translate3d(-50px, 15px, 0px) translateZ(0px);
It worked. Now the animation is smooth like silk.