React CSSTransitionGroup appear transition works only on 2D elements

Question

I use React's CSSTransitionGroup (the new react-transition-group@1.1.2. I don't know why, but the transition is made before 3D styles are applied.

Current behaviour (both in Chrome and Firefox) :

1. Objects fade in as 2D objects from opacity: 0 to opacity 1
2. Objects receive 3D styles

Expected behaviour:

1. Object receives 3D styles
2. Objects fade in as 3D objects from opacity: 0 to opacity 1

jsx:

   <CSSTransitionGroup component="div" id="container" transitionName="fadeBox" transitionAppear={true} transitionAppearTimeout={500}
          transitionEnter={false} 
          transitionLeave={false}>

          {this.state.projects.map((project) => {
            return (<Link to={"/project/" + project.id} key={"/project/" + project.id}>
              <Box imageURL={project.imageURL} text={project.text} key={project.id} /> </Link>)
          })}

        </CSSTransitionGroup>

css:

.fadeBox-appear {
    opacity: 0.01;
    transform: translate3d(0, -2%, 0);
}

.fadeBox-appear.fadeBox-appear-active {
    opacity: 1;
    transform: translate3d(0, 0%, 0);
    transition: all 0.5s ease-in-out;
}