Как сделать плавное появление псевдоэлемента?

Question

[WebN00b]

У меня есть карточки. При наведении на них, один слой должен изменять своё положение на 10px вверх и влево, а также должен появляться поверх этого градиент.
Его я сделал с помощью псевдоэлемента ::after. При наведении анимация изменения своей позиции происходит плавно, в то время как псевдоэлемент возникает и пропадает резкою
...


Вопрос заключается в следующем: как сделать плавным появление и исчезновение этого элемента, а также как сделать задержку перед исчезновением.
...
P.S. код я не смог выгрузить на кодпен из-за того что писал я его на SASS, а & CodePen не любит
Огромное спасибо за поддержку!

Comments

[Рома Зварич]

Было бы желание предоставить материал, который можно было бы пощупать.
Хоть архив залить куда-то и ссылку дать.
Да и на Codepen без проблем SASS с амперсандами размещают.

[Ankhena]

P.S. код я не смог выгрузить на кодпен из-за того что писал я его на SASS, а & CodePen не любит

Внезапно.
В любом случае вы можете выложить в песочницу скомпилированный CSS.

При наведении анимация изменения своей позиции происходит плавно, в то время как псевдоэлемент возникает и пропадает резкою

Вероятно, вы пытаетесь анимировать display, но display дискретен.
Замените на прозрачность или выезд или увеличение размера.

Answer 1

[profesor08]

.block {
  &:after {
    pointer-events: none; // чтоб не мешался
    opacity: 0;
    transition: ease opacity 0.3s;
    transition-delay: .0s; // при убирании курсора анимация сразу сработает
  }

  &:hover {
    &:after {
      opacity: 1;
      transition-delay: .5s; // время, которое элемент должен ждать после наведения курсора
    }
  }
}

Comments

[alex-1917]

сложно как-то и браузеры дохнут на пятых айфонах

[profesor08]

alex-1917, почему?

[alex-1917]

profesor08, не знаю. я для теста всегда гиперболизирую)) ситуацию, в данном случае transition-delay я набабахал примерно 1000 штук: добавил разных типов анимций, добавил цепочки задержек, элементов немного добавил, афоня пятый сдох через 2 секунды (брауз ушел в перезагрузку страницы).
а вот без transition-delay все в порядке.

Answer 2

[alex-1917]

Блок с градиентом делать через псевдоэлемент -ошибка, у тебя же там текст с оформлением должен быть?.
Еще один блок делай и вся недолга.
Ну а насчет псевдоэлемента и анимации - все работает, у тебя где-то ошибка в твоем секретном коде...
www.jooom.ru/toster/css1.html