Question

将鼠标悬停在图像上时，我编写了用于从顶部进行动画的代码。但是在制作动画时，它会滞留在原处，并且就位。我只想平滑过渡。你们可以帮我解决这个问题吗？

我的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;
  }
}

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更改为{{ 1}}。

将代码替换为下面的CSS。

ease-in

CSS网格响应式图像库：动画陷入困境

2 个答案: