/* 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; }