CSS动画从右到左动态

Question

我面临的问题是：

• 我有一个从右到左的动画文本，这个文本根据语言集而变化，是什么导致文本的总宽度也发生变化。

在这张图中，我想要的效果很好，因为一些属性是固定的。

现在，当我更改更长的文本时，问题就出现了。

所以，这就是我现在所拥有的：

这就是我想要的：

这是我正在使用的代码：

ReactJS 方面：

constructor(props) {
  super(props);

  this.state = {
    checked: false
  }
}

componentDidMount() {
  window.addEventListener('scroll', () => {
    if (event.srcElement.body.scrollTop >= 1400) {
      this.setState({ checked: true });
    }
  });
}

render() {
  return (
    <div>
      ... stuff
      <span style={{ fontSize: "40px", color: this.state.theme.COLOR_3 }}>
        <input type="checkbox" id="Resume-chk" style={{ display: "none" }} checked={this.state.checked} />
        <b id="Resume-title">{this.state.languageSet.RESUME}</b>
      </span>
      ... more stuff
    <div>
  );
}

CSS方面：

//This is the text
#Resume-title {
  display: inline-block;
  -webkit-transition: color 200ms ease-in;
  -moz-transition: color 200ms ease-in;
  transition: color 200ms ease-in;

  -webkit-transition: right 500ms ease-in;
  -moz-transition: right 500ms ease-in;
  transition: right 500ms ease-in;

  position: relative;
  right: -40.5%;
}

//This is the text when the checkbox is checked
#Resume-chk:checked ~ #Resume-title {
  right: 40.5%;
}

所以，问题是：如何修复它？或者也许我遗漏了一些概念，这不仅仅是修复错误。

此外，我不知道是否做这样的事情right: -40.5%;，并right: 40.5%;是一个很好的做法，但我不能找到一种方法，就像有生命财产float或align。

当然，如果有办法解决，也有办法做得更好，也欢迎！！！

编辑：这里包含整个 html 部分的小提琴，从开发控制台复制

Answer 1

您需要将定位与正确和转换相结合。

这是居中元素的常用想法，适合您的要求：

.container {
  width: 300px;
  background-color: lime;
  margin: 10px;
  position: relative;
}

.item {
  display: inline-block;
  position: relative;
  right: -100%;
  transform: translateX(-100%);
  transition: right 1s, transform 1s;
}

.container:hover .item {
  right: 0%;
  transform: translateX(0%);
}

<div class="container">
  <div class="item">Item</div>  
</div>
<div class="container">
<div class="item">Item long</div>
</div><div class="container">
  <div class="item">Item longer longer</div>
</div>