Как сделать обратную анимацию при hover, которая не стартует при загрузке страницы?

Question

[maksimkoh]

Всем привет! Есть сайт - secretplace.studio

На нем реализовал анимацию при hover'e изображение увеличивается и при отводе мышки плавно уменьшается. Проблема в том, что при загрузке страницы проигрывается обратная анимация. Как исправить?

.game-preview {
	animation-name: out;
	animation-duration: 0.5s;
}

.game-preview:hover {
	animation-name: in;
	animation-duration: 0.5s;
	-webkit-box-shadow: 0px 5px 18px 0px rgba(50, 50, 50, 1);
	-moz-box-shadow:    0px 5px 18px 0px rgba(50, 50, 50, 1);
	box-shadow:         0px 5px 18px 0px rgba(50, 50, 50, 1);
	animation-fill-mode: forwards;
	
}

 /*------------------------------------*\
    Animation
\*------------------------------------*/


@keyframes in {
	from {
		transform: scale(1.0);
		-webkit-box-shadow: 0px 5px 18px 0px rgba(50, 50, 50, 0);
		-moz-box-shadow:    0px 5px 18px 0px rgba(50, 50, 50, 0);
		box-shadow:         0px 5px 18px 0px rgba(50, 50, 50, 0);
	}
	to {
		transform: scale(1.1);
		-webkit-box-shadow: 0px 5px 18px 0px rgba(50, 50, 50, 1);
		-moz-box-shadow:    0px 5px 18px 0px rgba(50, 50, 50, 1);
		box-shadow:         0px 5px 18px 0px rgba(50, 50, 50, 1);
	}
}

@keyframes out {
	from {
		transform: scale(1.1);
		-webkit-box-shadow: 0px 5px 18px 0px rgba(50, 50, 50, 1);
		-moz-box-shadow:    0px 5px 18px 0px rgba(50, 50, 50, 1);
		box-shadow:         0px 5px 18px 0px rgba(50, 50, 50, 1);
	}
	to {
		transform: scale(1.0);
		-webkit-box-shadow: 0px 5px 18px 0px rgba(50, 50, 50, 0);
		-moz-box-shadow:    0px 5px 18px 0px rgba(50, 50, 50, 0);
		box-shadow:         0px 5px 18px 0px rgba(50, 50, 50, 0);
	}
}

Answer 1

[Andrey_Bazhanov]

Вам не зачем использовать @keyframes. Достаточно обычного transition: codepen.io/abazhanov/pen/GjYNPp