.@{tooltip-prefix-cls} { .effect() { animation-duration: 0.3s; animation-fill-mode: both; } &&-zoom-enter, &&-zoom-leave { display: block; } &-zoom-enter, &-zoom-appear { opacity: 0; .effect(); animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); animation-play-state: paused; } &-zoom-leave { .effect(); animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05); animation-play-state: paused; } &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active { animation-name: rcToolTipZoomIn; animation-play-state: running; } &-zoom-leave&-zoom-leave-active { animation-name: rcToolTipZoomOut; animation-play-state: running; } @keyframes rcToolTipZoomIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } } @keyframes rcToolTipZoomOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } } }