目前專案內有很多tooltip需要在hover時才顯示，那滑鼠移開後希望能夠平滑的消失，且主管希望能在隱藏時也不要被點到（所以要搭配visibility或display），目前是先寫了兩個animation：

@keyframes fadeIn {
    from {
        height: 0;
        display: block;
    }
    50% {
        height: 15px;
    }
    to {
        opacity: 1;
        display: block;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        display: block;
    }
    50% {
        opacity: .5;

    }
    to {
        opacity: 0;
        display: none;
    }
}

然後分別套用在有hover跟沒hover的狀態，並用animation-fill-mode: forwards來保持動畫完後的display狀態，使用上正常，但問題是在剛開始載入的時候，因為已經有掛fadeOut的關係，所以tooltip會先執行一次緩慢消失的動畫。
想知道關於這一點是否可能一樣單純只用CSS解決？（如初次載入時不要執行該動畫之類的？）
或者還是要用JS的跟mousec跟mouse跟mousecleave才有辦法？