Можно ли сделать так, что бы блок с текстом появлялся не сразу после того, как я уберу с него курсор? Как задать время, которое он будет «ждать»?

Question

[Alex_Polishcuk]

<div class="splash__screen__name">
	<div class="splash__screen__name__title">cool</div>
					
	<div class="splash__screen__name__subtitle">
		D i s h o n o r e d
	</div>  
</div>

.splash__screen__name {
	color: #fff;

	text-align: right;

	float: right;

	margin: 30px 30px 0 0; 

	z-index: 1;

	display: inline-block;
}

.splash__screen__name__title {
	text-transform: uppercase;

	font-size: 50px;
	font-weight: 500; 

	letter-spacing: 20px;
}

.splash__screen__name__subtitle {
	margin: 20px 20px 0 0;

	text-transform: uppercase;
	
	width: 1em;

	text-align: center;

	float: right;

	font-size: 30px;
	font-weight: 400;

	color: #FF7F62;
}

Есть анимация, которая воспроизводится при наведении, ей немного мешает нормально скрыться блок с текстом. Как сделать, что бы после того, как я уберу курсор с блока, див с текстом появлялся через секунды 2. Ну и желательно придать этому плавности.

Answer 1

[Ainur Shakirov]

С помощью css animation и animation-delay

Comments

[Alex_Polishcuk]

Все таки я не понял что к чему писать. Можно детальнее. Я прочитал много сайтов но так ничего и не понял. У меня в :hover к блоку написано, что div с текстом должен стать display: none, что бы другие элементы не были им сдвинуты при наведении. И получается когда я курсор убираю с блока, на который написан :hover, этот элемент сразу же стает display: inline-block и сдвигает анимированый блок тогда, когда он ещё не закончил свою анимацию. Из-за этого и хочу, что бы блок с текстом дал закончить анимацию и только потом появился (возможно глупое задание, но я не долго в этой сфере, примерно 3 месяца)