.slide-in-right-enter-active { -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .slide-in-right-leave-active { -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse; animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse; } @-webkit-keyframes slide-in-right { 0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .slide-in-top-enter-active { -webkit-animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .slide-in-top-leave-active { -webkit-animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse; animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse; } @-webkit-keyframes slide-in-top { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slide-in-top { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }