Как в css сделать задержку ПОСЛЕ hover?

Question

Как в css сделать задержку ПОСЛЕ hover?

Артур Кириллов Профи (656), на голосовании 7 месяцев назад

чтобы сделать задержку перед, нужно использовать transition s, но как сделать, чтобы эфект так же пропадал с течением времени(если это возможно)

Answer 1

робот д24 Мудрец (19734) 8 месяцев назад

Чтобы пропадал то через animation

Артур КирилловПрофи (656) 8 месяцев назад

подробнее можно? типа идет hover и меняется scale с прозрачностью

робот д24 Мудрец (19734) Артур Кириллов, покажи текущий код с transition

Артур КирилловПрофи (656) 8 месяцев назад

я лучше щас в ютубе чекна подробнее про все анимации, смысла от crtlc crtlv мне не будет

робот д24 Мудрец (19734) Артур Кириллов, ок

Answer 2

За длительность перехода отвечает свойство transition. Если тебе нужна именно задержка, есть свойство transition-delay

Answer 3

     .card__itemAuthor { 
        width: 200px; 
        height: 100px; 
        background: transparent; 
        border: 1px solid #000; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
    } 
 
    .card__itemAuthor:hover span { 
        animation: fadeInOut 2s linear forwards; 
    } 
 
    @keyframes fadeInOut { 
        30% { 
            background-color: red; 
        } 
        100% { 
            background-color: white; 
        } 
 
    }