如何使用css过渡显示快隐藏慢

Question

我有一个设置为的跨度，opacity : 0当用户悬停在它上面时我会显示它，但问题是我想快速显示它并慢慢隐藏它。

.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

覆盖悬停时的过渡持续时间：

.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>

在悬停时，它显示的持续时间很快，200ms但是当您停止悬停时，它会恢复1s并缓慢隐藏。