ReactCSSTransitionGroup simple example - reactjs

Question

I have been using ReactCSSTransitionGroup for basic animations - like slide in from left to right and right to left 2 images, but not able to acheive it - what am I missing here - the images animate but go back to their original position as soon as the animation is over - it is not looking good on the screen.
<ReactCSSTransitionGroup transitionName="square1" transitionAppear transitionEnterTimeout={1000}>
<img key={this.state.altText} alt="image" className="square-1" src="/images/sqr.svg" />
</ReactCSSTransitionGroup>
<ReactCSSTransitionGroup transitionName="square2" transitionAppear transitionEnterTimeout={1000}>
<img key={this.state.altText} alt="image" className="square-2" src="/images/sqr2.svg" />
</ReactCSSTransitionGroup>
css:
.square-1{
opacity: 0.4;
float:left;
position: absolute;
top:60px;
width: 150px;
left:-35px;
}
.square-2{
opacity: 0.4;
float:right;
width: 150px;
position: absolute;
right:-10px;
top:30px;
}
.square1{
position: absolute;
border:1px solid green;
left:10px;
top:90px;
}
.square1-appear {
opacity: 0.01;
transition: all 2s linear;
position:absolute;
left:-200px;
}
.square1-appear.square1-appear-active {
opacity: 0.4;
transition: all 2s ease-in;
position:absolute;
left:-30px;
top:-10px;
}
.square1-leave.square1-leave-active{
border:1px solid red;
}
.square2{
position: absolute;
right:10px;
top:30px;
}
.square2-appear {
opacity: 0.01;
transition: all 4s ease-in;
position:absolute;
right:-200px;
}
.square2-enter {
opacity: 0.01;
position:absolute;
right:-400px;
}
.square2-appear.square2-appear-active {
opacity: 0.8;
transition: all 2s ease-in;
position:absolute;
right:100px;
}