CSS Grid Responsive Image Gallery: Анимация застревает на своем пути

При наведении на изображение я написал код для анимации сверху. Но во время анимации он застревает на своем пути и становится на место. Мне просто нужен плавный переход. Можете ли вы, ребята, помочь мне понять это?

Ссылка на мою проблему codepen: https://codepen.io/subin_s/pen/KYgxWX?editors=1100

<div class = "grid-container">


  <figure class = "grid_item grid_item-1">
    <div class = "text" style = "text-align:center;">
      JavaScript
      <button class = "online_view">View Site</button>
    </div>
    <img class = "grid_image" src = "https://images.pexels.com/photos/942500/pexels-photo-942500.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt = "">
  </figure>


  <figure class = "grid_item grid_item-2">
    <div class = "text" style = "text-align:center;">
      Bootstrap
      <button class = "online_view">View Site</button>
    </div>
    <img class = "grid_image"  src = "https://images.pexels.com/photos/788946/pexels-photo-788946.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "">
  </figure>


<figure class = "grid_item grid_item-3">
  <div class = "text" style = "text-align:center;">
      HTML / CSS
      <button class = "online_view">View Site</button>
    </div>
    <img class = "grid_image"  src = "https://images.pexels.com/photos/17663/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "">
  </figure>


<figure class = "grid_item grid_item-4">
  <div class = "text" style = "text-align:center;">
      React JS
      <button class = "online_view">View Site</button>
    </div>
    <img class = "grid_image"  src = "https://images.pexels.com/photos/1927574/pexels-photo-1927574.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "">
  </figure>


<figure class = "grid_item grid_item-5">
  <div class = "text" style = "text-align:center;">
      Wordpress
      <button class = "online_view">View Site</button>
    </div>
    <img class = "grid_image" src = "https://images.pexels.com/photos/1647976/pexels-photo-1647976.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "">
  </figure>


<figure class = "grid_item grid_item-6">
  <div class = "text" style = "text-align:center;">
      Grid/Flexbox 
      <button class = "online_view">View Site</button>
    </div>
    <img class = "grid_image"  src = "https://images.pexels.com/photos/942500/pexels-photo-942500.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt = "">
  </figure>


</div>

Я написал код анимации внизу, если вы хотите быстро его увидеть.

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Raleway';
}

.grid-container {
  margin: 2rem;
  display: grid;
  grid-template-columns : repeat(3,1fr);
  grid-template-rows: repeat(2, 20vw);
  grid-gap: 10px;
}

.grid_image {
  width:100%;
  height:100%;
  object-fit:cover;
  transition: all 0.5s ease-in-out;
}

.grid_item {
  position: relative;
/*   overflow: hidden will prevent the image scaling to exceed the specified width. It will expand on back */
  overflow: hidden; 
}

/* .grid_item:hover {
  opacity: 0;
   animation: top_overlay 1s linear;
}
 */
/* .grid_item .after {
  position: absolute;
    top: 50%;
  left:50%;
  transform : translate(-50%, -50%);
  width: 100%;
  height: 100%;
    font-size : 2rem;
    display: none;
    color: red;
} */

/* .grid_item:hover .after {
  display: block;
  background: #fff;
  object-fit : cover;
} */

.grid_item:hover .grid_image {
  transform : scale(1.1);
  filter: blur(2px);
}

.text {
  font-size : 1.2rem;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #C0392B;
  font-weight:900;
  display: none;
}

.online_view {
  margin-top: 40px;
  padding: 5px 10px;
  background-color: transparent;
  color: #fff;
  outline:none;
  border: 1px solid yellow;
}

button.online_view {
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

button.online_view:hover{
  background-color: #E8F6F3;
  color: #CA5D46;
}

.grid_item:hover .text {
  display: block;

/*   text to see, otherwise hides in the back */
  z-index: 999;
  animation : slide 0.5s ease;
}


@keyframes slide {
  0% {
    top:-100px;
  }

  25% {
    top: -75px;
  }

  50% {
    top: -50px;
  }

  75% {
    top: -25px;
  }

  100% {
   top:0;
  }
}