CSS Animation from right to left dynamically - html

Question

The problem I'm facing is:
I have a animated text which goes from right to left, this text change depending on the languague set, what is causing that the total width of the text changes too.
In this picture, the effect I want is working fine, because some properties are fixed.
Now, when I change for a longer text the problem cames up.
So, this is what I have now:
And this is what I'd like to have:
Here is the code I'm using:
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 Side:
//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%;
}
So, the question is: How to fix it? Or maybe there is some concept I'm missing and it is a little bit more than just fixing a bug.
Also I'm not sure if doing things like right: -40.5%; and right: 40.5%; is a good practice, but I cant find a way to animate property like float or align.
Of course, if there is a way to fix it, but also there is a way to do it even better, It is also welcome!!!
EDITED: here the fiddle containing the whole html section, copied from dev console

Answer 1

You need a combination of positioning with right and a transform.
This is an usual idea for centering an element, adapted to your request:
.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>