css - 如何在动画填充模式 : forward? 之后再次为元素设置动画

Question

所以我有一个元素网格，我将它们设置为在页面加载时一个接一个地淡入淡出。

所以它们从一个元素到下一个元素有 0.2 秒的延迟，从不透明度 0 淡入到不透明度 1。

然后我希望这些元素中的图像在突出显示网格部分时增长，但我的动画填充模式阻止了这种情况。

有什么解决办法吗？

//Expand when hover over.
.main-image {
  transition: transform .2s ease-in-out;
}

#portfolio:hover #portfolio-image {
transform: scale(1.1);
}


// Fade in with delay
@keyframes fadeInFromAbove {
    0% {
        transform: translateY(-30%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

#portfolio .main-image {
  opacity: 0;
  animation: 0.5s ease-out 0.2s 1 fadeInFromAbove;
  animation-fill-mode: forwards;
}

HTML 格式:

<div id='portfolio' class='main-block'>
      <div id='portfolio-image' class='main-image'></div>
</div>

Answer 1

使用如下两个动画:

.main-image {
  transition: transform .5s ease-in-out;
  height: 50px;
  margin: 10px;
  background: red;
}

#portfolio:hover #portfolio-image {
  transform: scale(1.1);
}

@keyframes fade {
  100% {
    opacity: 1;
  }
}
@keyframes move {
  0% {
    transform: translateY(-30%);
  }
}

#portfolio .main-image {
  opacity: 0;
  animation: 
    0.5s ease-out 0.2s fade forwards, /* forwards only for opacity */
    0.5s ease-out 0.2s move;
}

<div id='portfolio' class='main-block'>
  <div id='portfolio-image' class='main-image'></div>
</div>