How to make reverse animation on hover that doesn't start on page load?

Question

css

Hello! There is a site - secretplace.studio
On it implemented animation at hover'e the image increases and at removal of a mouse smoothly decreases. The problem is that when the page loads, the reverse animation plays. How to fix?

.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

You don't need to use @keyframes. The usual transition is enough: codepen.io/abazhanov/pen/GjYNPp