CSS网格响应式图像库:动画卡在路上

Question

在悬停图像时，我编写了从顶部进行动画的代码。但是在制作动画时，它会卡在路上并就位。我只想平稳过渡。你们能帮我弄清楚吗？

我的代码笔问题链接：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;
  }
}

Answer 1

如果您想

平稳过渡，请避免 3 个动画中断。下面的代码你可以尝试替换：

.text {
  font-size : 1.2rem;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #C0392B;
  font-weight:900;
  opacity: 1;
}
.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 {
  opacity: 1;
  z-index: 9;
  animation : slide 0.7s ease forwards;
}

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

同样，尝试简化您的代码。

Answer 2

卡住是因为您在关键帧 0%、25%、50% 中添加了许多步骤,...此外，我还更改了 css 类中的时间，并从grid_image样式ease-in-out更改为ease-in。

将您的代码替换为下面的 css。

.grid_image {
  width:100%;
  height:100%;
  object-fit:cover;
->transition:0.5s ease-in; or transition:all 0.5s ease-in;
}
.grid_item:hover .text {
  display: block;
  /*text to see, otherwise hides in the back */
  z-index: 999;
->animation : slide 0.7s ease-in;
}
    @keyframes slide {
      0%{
        top:-100px;
      }
      75% {
        top: -25px;
      }