Accepted answer

I figured it out! Your CSS animations are trying to use fadeIn, but that's not a CSS property. You need to change it to opacity. Like so:

//Page transition
.pageTransition-enter {
  opacity: 0.01;
.pageTransition-enter.pageTransition-enter-active {
  animation: opacity 1s ease-in;
.animation-leave {
  opacity: 1;
.pageTransition-leave.pageTransition-leave-active {
  animation: opacity 3s ease-in;
.pageTransition-appear {
  opacity: 0.01;
.pageTransition-appear.pageTransition-appear-active {
  animation: opacity 5s ease-in;


try defining your inner component before return call:

render() {
    const clonedElement = <div>{this.props.content()}</div>;

    return (
        <ReactCSSTransitionGroup transitionName="pageTransition" transitionEnterTimeout={500} transitionLeaveTimeout={300} transitionAppear={true} transitionAppearTimeout={500}>

Related Query

More Query from same tag