Create full page transitions?

[ShadiestGoat]

Heya! I'm totally lost at this point. Can this module be used to create entire page transitions, using react-router? I have this css:

.pageFromBottom {
    animation: animBot 1.3s ease-in-out alternate;
}

.pageToTop {
    animation: AanimTop 1.3s ease-in-out alternate;
}

@keyframes AanimTop {
    from {
        transform: none;
        opacity: 1;
    }
    to {
        opacity: 0.4;
        transform: rotate(-15deg) scale(0.7) translate(-60vw, -165vh);
    }
}

@keyframes animBot {
    from {
        opacity: 0.4;
        transform: rotate(-15deg) scale(0.7) translate(60vw, 165vh);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

And I have the following react:

        <div class="container">
            <BrowserRouter>
                <Helmet>
                   ...
                </Helmet>
                <div class="col" style={{width: `50vw`}}>
                    <Switch>
                        <Route exact path="/" component={Page1} />
                        <Route exact path="/2" component={Page2} />
                        <Route exact path="/3" component={Page3} />
                        <Route component={Notfound} />
                    </Switch>
                </div>
            </BrowserRouter>
        </div>

But I honestly don't get where to put the CSSTransition, TransitionGroup. I tried wrapping the div w/ class=col with CSSTransition, and that with TransitionGroup, but it didn't work... I used default settings from README, but I don't really get what they do, etc.

Thank you in advance!