Задать вопрос
NoName0
@NoName0
html

Кто знает как сделать анимацию по типу :hover но при отведении мыши?

На хосинг залил сайт для наглядности antonvolkov6666.000webhostapp.com .
Вообщем есть плавная анимация при наведении , нужно сделать так чтобы при сведении мыши с эллемента была не резкая , а такая же плавная анимация. Есть ли псевдо класс при сведении мыши или придётся писать на js

И еще вопрос можно ли сделать именно в css так чтобы при взаимодействии с одним эллементом менялся другой?

<!DOCTYPE html>
<html lang="ru">
<head>
	<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> -->
	<meta charset="UTF-8">
	<title>test</title>
</head>
<style>
	*{
		
	}
	body{
		margin: 0;
		background: #FFD9D9;
	}
	#ads{
		background: #FFFFFF;
		width: 250px;
		height: 320px;
		margin: 40px;
		text-align: center;
		float: right;
		border-radius: 20px;
		font-family: Comic Sans MS;
		color: #333333;
	}
	#ads:hover{
		animation: animAdsCont .6s ease forwards;
	}
	#imgAds{
		background-image: url("iisakevski.jpg");
		background-size: cover;
		width: 210px;
		height: 200px;
		margin: auto;
		border-radius: 10px;
		margin-bottom: 15px;
		margin-top: 20px;
		filter: blur(1px);
	}
	#imgAds:hover{
		animation: animAdsimg 1.5s ease forwards;
		filter: blur(0px);
	}

	@keyframes animAdsimg{
		100%{
			width: 250px;
			height: 320px;
			margin-top: 0px;
			border-radius: 20px;
			color: rgba(0,0,0,0);
		}
	}
	@keyframes animAdsCont{
		100%{
			height: 250px;
			border-radius: 30px;
			color: rgba(0,0,0,0);
		}
	}

</style>
<body>
	<div id="wrapper">
		<div id="ads">
			<div id="imgAds"></div>
			Здесь должна быть ваша реклама
		</div>
	</div>
</body>
</html>

<script>
	
</script>
  • Вопрос задан
  • 3109 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Класса для антиховера нет.

Не уверен, что там вообще нужна keyframes, вполне можно обойтись обычным translate.
Тогда анимация будет плавной в обоих направлениях.

#ads{
translate: all 1s ease;
}
#ads:hover {
width: 250px;
height: 320px;
margin-top: 0px;
border-radius: 20px;
color: rgba(0,0,0,0);
}
Ответ написан
Комментировать
Комментировать
SanceiLaks
@SanceiLaks
Программист228337 и вообще топ)))))))))))))))))
Всё легче чем кажется 
.imglogo{
	margin: 0 0 0 200px;
    transition-property: all;
    transition: .9s
}
.imglogo:hover{
  -webkit-transform: scale(1.6);
  -ms-ransform: scale(1.6);
  transform: scale(1.6);
}

Закинул свой, но надеюсь понятно
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Тестирование модуля ElasticSearch через ftp
22 нояб. 2024, в 03:54
1500 руб./за проект
Телеграм бот
22 нояб. 2024, в 02:56
10000 руб./за проект
Перерисовать логотип в векторе
22 нояб. 2024, в 00:55
500 руб./за проект
Ещё заказы