CSS动画从右到左动态

Question

我面临的问题是：

• 我有一个动画文字，从右到左，这个文字根据语言设置而变化，导致文本总宽度变化的原因。

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

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

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

这就是我想要的：

以下是我正在使用的代码：

ReactJS Side：

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这样的动画制作方法

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

EDITED：here包含整个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>