Как правильно пользоваться transition?

Question

[Иван Иванов]

Здравствуйте, уважаемые разработчики. Прошу прощения за глупый вопрос, но не могу правильно сформировать запрос в поисковике, чтобы найти ответ. Создал вот такой элемент

<div class="sect4-cell8">
	  <div class="ramp-border"></div>
	  <div class="name-cell-my-house">Удобные</br> формы оплаты</div>
</div>

При наведении я использую transition чтобы увеличить размер name-cell-my-house, для плавной анимации. Всё работает хорошо и блок плавно увеличивается, но при убирании курсора с этого элемента, name-cell-my-house резко принимает изначальное значение. Не могу понять, как сделать что бы размер этого div`a плавно уменьшался назад.

вот сайт на котором не могу это реализовать данную задачу cl184972.tmweb.ru/#4thpage подскажите пожалуйста.

Comments

[Сергей delphinpro]

transition пишете на состоянии :hover? не надо так.

[Иван Иванов]

Сергей, Тогда подскажите пожалуйста, как правильно реализовать данную задачу. Я просто не так давно занимаю разработкой.

[Сергей delphinpro]

Иван Иванов, я уже подсказал

[Иван Иванов]

Сергей, мне это к сожалению никак не помогло. Только породило еще больше вопросов. На сайтах с примерами transition, видел не однократно примеры с hover.

[Сергей delphinpro]

Иван Иванов, блин...

.someclass {
  width: 100px;
  transition: 0.5s ease;
}

.someclass:hover {
  width: 200px;
}

[Иван Иванов]

Сергей, Спасибо ) так намного понятней. А если не трудно, объясните пожалуйста, почему не хорошо использовать transition на состояние hover?

[Сергей delphinpro]

Иван Иванов, Почему не хорошо? Нормально, если требуется. но вам нужно другое поведение.

[DTX]

Иван Иванов, потому что при пропадании :hover, пропадает и transition. Поэтому блок уменьшается без анимации

[game802]

DTX, а что Вы скажете на этот код?

p {
  color: green;
  transition: color .3s;
}

p:hover {
  color: red;
}

Тут при ховере transition никуда не пропадает.

[DTX]

HackOwnB, так и надо делать