.fade-enter, .fade-appear { opacity: 0; .motion-common(); animation-timing-function: linear; animation-play-state: paused; } .fade-leave { .motion-common(); animation-timing-function: linear; animation-play-state: paused; } .fade-enter.fade-enter-active, .fade-appear.fade-appear-active { animation-name: fadeIn; animation-play-state: running; } .fade-leave.fade-leave-active { animation-name: fadeOut; animation-play-state: running; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }