body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; } .container { position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-size: 20px; transition: all .5s cubic-bezier(.55,0,.1,1); } .child { position: absolute; top: 200px; left: 0; width: 100%; text-align: center; font-size: 16px; transition: all .5s cubic-bezier(.55,0,.1,1); } ul { list-style: none; padding: 0; } .page-enter-active, .page-leave-active { transition: opacity .5s } .page-enter, .page-leave-active { opacity: 0 } .bounce-enter-active { animation: bounce-in .8s; } .bounce-leave-active { animation: bounce-out .5s; } @keyframes bounce-in { 0% { transform: scale(0) } 50% { transform: scale(1.5) } 100% { transform: scale(1) } } @keyframes bounce-out { 0% { transform: scale(1) } 50% { transform: scale(1.5) } 100% { transform: scale(0) } } .slide-left-enter, .slide-right-leave-active { opacity: 0; transform: translate(30px, 0); } .slide-left-leave-active, .slide-right-enter { opacity: 0; transform: translate(-30px, 0); } .fade-enter, .fade-leave-active { opacity: 0; } .fade-leave-active, .fade-enter { opacity: 0; }