CSS 动画 - 有没有办法让动画不那么紧张？

Question

所以我使用 CSS 动画在文本周围反弹，但动画似乎很紧张，有什么方法可以让这个运行更流畅？

代码如下：

HTML

<div class="x">
  <p class="y">TEST</p>
</div>

SCSS

$size: 100px;

body {
  margin: 0;
}

img, div {
  width: $size;
  height: $size;
}

.x {
  animation: x 3s linear infinite alternate;
}

.y {
  font-size: 35px;
  animation: y 4s linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX( calc(100vw - #{$size}) );
  }
}

@keyframes y {
  100% {
    transform: translateY( calc(100vh - #{$size}) );
  }
}

And here is the link to the CodePen.