CSS-ReactJS Animation when an element gets visible - html

Question

I don't know if what I want is possible with pure CSS, I'd prefer to avoid using JQuery because I'm building my app with ReacJS.
I have the following effect
.container {
display: flex;
flex-direction: column;
}
#box {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
transition: all 800ms ease-in;
position: relative;
right: calc(100px - 100%);
}
#chk:checked ~ #box{
right: 0;
}
<div class="container">
<label>check the input to see the effect</label>
<br/>
<input id="chk" type="checkbox">
<div id="box"></div>
</div>
It works when an input (checkbox) is checked, the thing is I want to reproduce the same effect but when an element is shown in the screen.
Why not to use JQuery?
As I'm building my app using ReactJS, using JQuery is not recommended neither the community nor Facebook.
I'd like to use CSS some React component, but I don't know how.
Check my own answer to see how I figured it out

Answer 1

Why don't you create a class instead of selector with checked property and then toggle the class with react.

Answer 2

Using CSS + ReactJS I solved doing this:
I used a checkbox to check or uncheck depending on where the scroll is. Then using CSS just change where the text is being rendered.
CSS Code:
#WhoIAm-title {
display: inline-block;
-webkit-transition: all 800ms ease-in;
-moz-transition: all 800ms ease-in;
transition: all 800ms ease-in;
position: relative;
right: -38%;
}
#WhoIAm-chk:checked ~ #WhoIAm-title {
right: 38%;
}
ReactJS Code:
componentDidMount() {
window.addEventListener('scroll', () => {
if (event.srcElement.body.scrollTop >= 620 && event.srcElement.body.scrollTop <= 650) {
this.setState({ checked: true });
}else if (event.srcElement.body.scrollTop >= 820 || event.srcElement.body.scrollTop <= 600) {
this.setState({ checked: false });
}
});
}
render() {
return (
<div id="whoiam" className="Container column">
<span>
<input type="checkbox" id="WhoIAm-chk" style={{ display: "none" }} checked={this.state.checked} />
<b id="WhoIAm-title">Title to toggle to right</b>
</span>
</div>
);
}