@keyframes bd-slidein { 0% { transform: translateX(-100%); opacity: .2; } 70% { transform: translateX(0%); opacity: 1; } 100% { transform: translateX(0%); opacity: 1; } } @keyframes bd-slideout { 0% { transform: translateX(0%); opacity: 1; } 100% { transform: translateX(-100%); opacity: .2; } } @keyframes bd-slideoutin { 0% { transform: translateX(-10%); opacity: 1; } 20% { transform: translateX(-100%); opacity: .2; } 70% { transform: translateX(0%); opacity: 1; } 100% { transform: translateX(-10%); opacity: 1; } } @keyframes bd-toast-up { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0%); opacity: 1; } } @keyframes bd-toast-down { 0% { transform: translateY(0%); opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } } @keyframes bd-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes bd-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes bd-modal-in { 0% { transform: scale(0.8); opacity: 0; } 90% { transform: scale(1.01); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes bd-modal-out { 0% { transform: scale(1); opacity: 1; } 10% { transform: scale(1.01); opacity: 1; } 90% { opacity: 0; } 100% { transform: scale(0.8); opacity: 0; } } @keyframes bd-backdrop-in { 0% { opacity: 0; } } @keyframes bd-backdrop-out { 100% { opacity: 0; } } @keyframes bd-warn-shake { 10%, 90% { transform: translate3d(-4px, -4px, 0); } 20%, 80% { transform: translate3d(4px, 4px, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 4px, 0); } 40%, 60% { transform: translate3d(4px, -4px, 0); } }