CSS 动画转发正在阻止 css 转换

Question

我正在将我的 CSS 动画类型设置为 forwards 以便动画的完成帧是完成时的默认状态。

但是现在，动画相同属性 (transform) 的过渡不再有效...

我必须使用 forwards，否则动画后不透明度会重置为 0。

如何在动画结束后立即启用过渡？我正在寻找没有 javascript.

的仅 CSS 选项

CSS

album {
    opacity: 0;
    animation:movein 0.6s forwards;
    transition: all 0.3s ease-in-out;
}

album:hover {
    transform:scale(1.05);                       // this doesn't work
    box-shadow: 0px 0px 45px rgba(0,0,0,0.5);    // this works
}

@keyframes movein {
  from {
    opacity:0;
    transform: translateX(-100px);
  }

  to {
    opacity:1;
    transform: translateX(0px);
  }
}

album:nth-child(2) {
    animation-delay: 0.2s;       // delay keeps opacity 0 for a while
}
album:nth-child(3) {
    animation-delay: 0.4s;       // delay keeps opacity 0 for a while
}

Answer 1

一个解决方案可能是拆分动画。只有fadein动画有动画forward。

album {
    opacity: 0;
    animation:movein 0.6s, fadein 0.6s forwards;
    transition: all 0.3s ease-in-out;
}
@keyframes movein {
  from {
    transform: translateX(-100px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes fadein {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }

}

CSS 动画转发正在阻止 css 转换

CSS animation forwards is preventing css transitions

css

transition