在animation-fill-mode之后，如何再次对元素进行动画处理? [英] How to animate element again, after animation-fill-mode: forward?

问题描述

因此，我有一个元素网格，并且将它们设置为在页面加载时一个接一个地淡入淡出.

So I have a grid of elements and I have set them to fade in one after the other on page load.

因此从一个元素到下一个元素从不透明度0到不透明度1的延迟为0.2s.

So they have a 0.2s delay from one element to the next fading in from opacity 0 to opacity 1.

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

I then want images in these elements to grow when there grid section is highlighted, but my animation-fill-mode is preventing this.

有什么可解决的地方吗?

Any work arounds?

//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>

推荐答案

使用以下两个动画:

.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>

这篇关于在animation-fill-mode之后，如何再次对元素进行动画处理?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！