Кто знает как сделать анимацию по типу :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>
  • Вопрос задан
  • 129 просмотров
Пригласить эксперта
Ответы на вопрос 3
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);
}
Ответ написан
Splinter_1g
@Splinter_1g
.NET Core, VueJS
Можете использовать псевдокласс :not(:hover).
.class-name:not(:hover){
  opacity: 0.3;
}

Пример с анимацией прозрачности.
Или по правильной логике установите для hover свой стиль, transition сделает все сам.
.example-class{
  background:#000;
  width: 50px;
  height: 50px;
  transition: 0.4s;
  opacity: 0.3;
}

.example-class:hover{
  opacity: 1;
}
Ответ написан
@SanceiLaks
Начинающий программист
Всё легче чем кажется
.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);
}

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

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

Войти через TM ID
Похожие вопросы