CSS 动画填充模式干扰悬停：增长动画

问题描述

我有一个 az 图像，我想在其上应用两个动画：

• 动画 1：悬停时生长
• 动画 2：第一次出现时淡入和滑入一起

当我在第二个动画上应用“animation-fill-mode:forwards”修饰符时，它取消了第一个动画的“轻松”效果。 去除滑入效果后，增长效果再次起作用。

我在图像上设置了悬停增长效果，并具有轻松过渡：

img { transition: all 1s ease; }
img:hover { transform: scale(1.2); }

然后我为图像定义了淡入+滑入效果：

img { animation: 1s ease 1s 1 slideInIcon; }

@keyframes slideInIcon {
    0% 
    { opacity: 0; 
      transform: translateX(-200%);
    }
  100% { opacity: 1; }
}

由于效果启动延迟（1s），图标先出现，然后在动画开始时消失。 因此我将图像默认不透明度设置为 0。 现在，在动画之后，图标消失了。 （可见性恢复为默认值 0） 因此，我将图标“animation-fill-mode”设置为“forwards”：

img {
   animation: 1s ease 1s 1 slideInIcon forwards;
   transition: all 1s ease;
   opacity:0;
}

现在，图标在动画后保持可见，但悬停动画不会“缓和”。

我整理了一个最小的例子来演示我的问题：

https://jsfiddle.net/Jazoja/zpf0bd1v/25/

提前感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）