how to use css transition to show fast and hide slow

Question

I have a span which is set to opacity : 0 and I show it when user hover on it, but the matter is I want to show it fast and hide it again slowly.

.mySpan {
    opacity: 0;
    font-size: 12px;
    background: red;
    border-radius: 5px;
    color:#fff;
    transition: opacity cubic-bezier(0, 0.52, 1, 1) 0.3s
}

.mySpan:hover{
    opacity: 1
}

Answer 1

Override the transition duration on hover:

.mySpan {
    opacity: 0.1;
    font-size: 12px;
    background: red;
    border-radius: 5px;
    color:#fff;
    transition: opacity cubic-bezier(0, 0.52, 1, 1) 1s;
}

.mySpan:hover{
    opacity: 1;
    transition-duration: 200ms;
}

<span class="mySpan">Hello</span>

On hover it shows fast as the duration is 200ms but when you stop hovering it reverts back to 1s and hides slowly.