Skip to content

Instantly share code, notes, and snippets.

@Temzasse
Last active June 6, 2017 15:28
Show Gist options
  • Save Temzasse/8e25a98acc56a9694b2b676e48229f4e to your computer and use it in GitHub Desktop.
Save Temzasse/8e25a98acc56a9694b2b676e48229f4e to your computer and use it in GitHub Desktop.
CSS animations given to CSSTransitionGroup used inside React.js Toaster component
.toastAnimEnter, .toastAnimAppear {
opacity: 0.01;
transition: opacity .5s cubic-bezier(.03, .83, .76, .98);
}
.toastAnimEnter.toastAnimEnterActive, .toastAnimAppear.toastAnimAppearActive {
opacity: 1;
}
.toastAnimLeave {
opacity: 1;
transform: translateX(0px);
transition: opacity .5s cubic-bezier(.03, .83, .76, .98), transform .5s cubic-bezier(.03, .83, .76, .98);
}
.toastAnimLeave.toastAnimLeaveActive {
opacity: 0;
transform: translateX(400px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment