每次触发上述元素动画时，如何保持 HTML/CSS 元素固定而不是 jutter/adjust？

Question

这是一个挑剔的设计，但我基本上在下面的联系按钮上方有这个元素，这使得列表元素有点弹出（使用转换和其他我拼凑的基本 CSS 动画知识），但现在每次触发上面的动画时stutters/jumps下面的按钮。

我在这个特定的练习中使用零 JavaScript（只是 HTML/CSS），我想保持这种状态，但如果使用 JavaScript 是一个快速和小的修复- 那么确定为什么不。

问题中的 HTML 部分：

<div>
    <ul class="projectlist">
        <li class="slidein">&#127918 The Game</li>
        <li class="slidein">&#128296 The Toolbox</li>
        <li class="slidein">&#128218 The Resource</li>
        <li class="slidein">More projects...</li>
    </ul>
</div>
<div class="divbutton">
    <h2><a href="default.asp" target="_blank">Contact</a></h2>
</div>

与 SlideIn 转换相关的 CSS：

.slidein:hover {
  animation-duration: 0.2s;
  animation-name: slidein;
  animation-iteration-count: 1;
  animation-direction: normal;
  
}

@keyframes slidein {
  from {
    font-size: 19px;
    translate(0,0);
  }

  to {
    font-size:20px;
    translate(10,0);
  }
}

CSS 与联系按钮相关，如果您需要，可获取更多信息：

.divbutton {
     text-align: center;
     position: relative;
}

a {
    text-align: center;
    border-radius: 35px;
    border: 2px solid #73AD21;
    width: 150px;
    height: 60px;
    display: inline-block;
    text-decoration: none;
    color: black;
    padding: -20px;
}

a:hover, a:active {
  background-color: #59b515;
  color: white;
}


.projectlist {
    text-align: center;
    font-family: 'NowRegular';
    font-size: 19px;
    list-style: none;
    margin-right: 25px;
}

如果您需要，这里还有一个问题的视频：Youtube

就像联系人按钮在底部跳到那里的方式。

我已经尝试过一些简单的东西，比如固定位置、绝对等等，但都没有用。

Answer 1

会发生这种情况，因为动画会更改链接的行高。

这应该可以解决问题：

.slidein {
  line-height: 24px;
}

编辑：动画应该在 class 上配置，没有 ":hover"，否则动画只会在鼠标在元素上时触发。当鼠标离开元素时，动画并没有结束，而是跳转到默认状态。不需要关键帧动画。你可以在“:hover”选择器上定义更大的字体。

看这里：https://codepen.io/unnamed-5-8-13/pen/mdmeMWq

每次触发上述元素动画时，如何保持 HTML/CSS 元素固定而不是 jutter/adjust？

How to keep HTML/CSS element fixed and not jutter/adjust everytime the above element animation is triggered?

html

javascript

css

css-animations