Q:

how to use css transition to show fast and hide slow

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
}

A:

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.

