bigbluebutton-Github/bigbluebutton-html5/client/stylesheets/toastify.css

/* TODO: We can remove this file after we update react animation package */
@keyframes toastify-bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0); }
  75% {
    transform: translate3d(10px, 0, 0); }
  90% {
    transform: translate3d(-5px, 0, 0); }
  to {
    transform: none; } }
.toastify-bounceInRight, .toast-enter--top-right, .toast-enter--bottom-right {
  animation-name: toastify-bounceInRight; }

@keyframes toastify-bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0); } }
.toastify-bounceOutRight, .toast-exit--top-right, .toast-exit--bottom-right {
  animation-name: toastify-bounceOutRight; }

@keyframes toastify-bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0); }
  75% {
    transform: translate3d(-10px, 0, 0); }
  90% {
    transform: translate3d(5px, 0, 0); }
  to {
    transform: none; } }
.toastify-bounceInLeft, .toast-enter--top-left, .toast-enter--bottom-left {
  animation-name: toastify-bounceInLeft; }

@keyframes toastify-bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0); } }
.toastify-bounceOutLeft, .toast-exit--top-left, .toast-exit--bottom-left {
  animation-name: toastify-bounceOutLeft; }

@keyframes toastify-bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0); }
  75% {
    transform: translate3d(0, 10px, 0); }
  90% {
    transform: translate3d(0, -5px, 0); }
  to {
    transform: translate3d(0, 0, 0); } }
.toastify-bounceInUp, .toast-enter--bottom-center {
  animation-name: toastify-bounceInUp; }

@keyframes toastify-bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0); } }
.toastify-bounceOutUp, .toast-exit--top-center {
  animation-name: toastify-bounceOutUp; }

@keyframes toastify-bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0); }
  75% {
    transform: translate3d(0, -10px, 0); }
  90% {
    transform: translate3d(0, 5px, 0); }
  to {
    transform: none; } }
.toastify-bounceInDown, .toast-enter--top-center {
  animation-name: toastify-bounceInDown; }

@keyframes toastify-bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0); } }
.toastify-bounceOutDown, .toast-exit--bottom-center {
  animation-name: toastify-bounceOutDown; }

.toastify-animated {
  animation-duration: 0.75s;
  animation-fill-mode: both; }