Как сделать обратный transition цвета в CSS?

229
26 апреля 2022, 22:10

Недавно начал верстку сайта. Я задал transition почти каждому элементу на сайте - работает все красиво и слажено. Так вот сейчас стоит задача: сделать обратный transition, то есть задержку при отведении курсора. Подскажите как это можно реализовать, и какой вообще для этого существует псевдокласс в CSS?

Answer 1

Просто добавляете свойство transition не только на hover

span {
  transition: color .5s;
}
span:hover {
  transition: color .5s;
  color: red;
}
<span>Text</span>

Answer 2

transition-delay для задержки. ease-in-out для обратной анимации

button {
  border: 0px;
  border-radius: 2px;
  outline: none;
  padding: 4px 8px;
  cursor: pointer;
  color: #FFF;
  background: #63AEEE;
  cursor: pointer;
  
  transition: .5s ease-in-out;
  transition-delay: .5s;
}
button:hover {
  background: #FF6040;
}
<button>qeqqe</button>

READ ALSO
java после nextInt проблемы с nextLine
Java

java после nextInt проблемы с nextLine

Есть такой код,который должен выводить информацию о 3 книгах, но код останавливается после 2ой и ошибка(Индекс 3 выходит за пределы длины 3) если...

 167
Полиморфизм. Создайте метод который ожидает параметр как объект родительского типа. Внутри этого метода вызовите метод объекта
Java

Полиморфизм. Создайте метод который ожидает параметр как объект родительского типа. Внутри этого метода вызовите метод объекта

У меня есть домашнее задание, но прохожу обучение на английском и не могу до конца понять что конкретно хотят и что нужно сделатьВ оригинале...

 250
Создание объектов в Spring
Java

Создание объектов в Spring

Пытаюсь начать изучать SpringНо не могу понять как создать элементарный объект, передав в конструктор значения

 239
перегрузка метода, что будет выполняться
Java

перегрузка метода, что будет выполняться

Подскажите пожалуйста почему выполняется второй метод (хотя он стринговый), и при компиляции ругается на преобразование:

 199