Slide in from left, slight off to right | CSSTransitionGroup

floatup.css

.floatUp-enter {
	opacity: 0.1;
	transform: translate3d(0, 30%, 0);
}

.floatUp-enter.floatUp-enter-active {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: all ease-in-out 400ms;
}

.floatUp-exit {
	opacity: 0;
}

.floatUp-exit.floatUp-exit-active {
	transform: translate3d(0, 30%, 0);
	opacity: 0;
	transition: all ease-out 300ms;
}

slide.scss

.slide-enter {
	opacity: 0.1;
	transform: translateX(30%);
}

.slide-enter.slide-enter-active {
	opacity: 1;
	transform: translateX(0);
	transition: all ease-in-out 400ms;
}

.slide-exit {
	position: fixed;
	opacity: 1;
}

.slide-exit.slide-exit-active {
	transform: translateX(-30%);
	opacity: 0;
	transition: all ease-out 300ms;
}

translate3d is probably better