Как использовать переход css, чтобы показать быстро и скрыть медленно

У меня есть диапазон, для которого установлено значение 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
}

css animation

09.04.2019 14:22

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 466

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете добавить другое значение transition на hover:

.mySpan {
    opacity: 0;
    font-size: 12px;
    background: red;
    border-radius: 5px;
    color:#fff;
    transition: 1s;
    padding:10px;
}

.mySpan:hover{
    opacity: 1;
    transition:0s;
}

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

09.04.2019 14:26

Ответ принят как подходящий

Переопределить продолжительность перехода при наведении:

.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 и медленно скрывается.

спасибо, можем ли мы подождать 2 секунды после снятия курсора, а затем скрыть элемент с переходом 0,3 секунды с помощью CSS?

— 14.04.2019 08:12

Просто добавьте transition-delay: 2s. Вы должны прочитать о переходах.

— 14.04.2019 10:43

09.04.2019 14:27