javascript - 过渡动画到文本对齐 : center

Question

我正在使用下面的；但是边距不像 text-align:center; 那样近似 无论如何我可以切换 text-align:center; 以伴随动画过渡发生直到它到达 text-align: center; 的点，类似于下面实现的点。

if ($(".resource-section").hasClass("resource-section--expanded")) {
     $(".resources__header h2").animate({"marginLeft": "40%"}, "slow");
}

Answer 1

您可以使用居中技术，让您水平居中任何元素。

它可以只使用 CSS 制作动画

.test {
  position: absolute;
  transform: translateX(0%);
  left: 0%;
  animation: center 2s infinite;
}

@keyframes center {
  0%, 10% {
      transform: translateX(0%);
      left: 0%; 
  }
  90%, 100% {
      transform: translateX(-50%);
      left: 50%; 
  }
}

<h1 class="test">TEST</h1>