我需要在css中有两个动画，一个在开始，一个在悬停，但它不起作用

Posted 2023-03-06

【中文标题】我需要在css中有两个动画，一个在开始，一个在悬停，但它不起作用

【英文标题】：I need to have two animations in css, one at start and one at hover, but it isn't working

【发布时间】：2019-10-23 19:35:54

【问题描述】：

我有一个 div 元素，它在启动页面时播放动画。当我将鼠标悬停在它上面时，我想让它播放另一个动画。它工作得很好，但是当我将鼠标移出 div 元素时，它会再次播放开始动画（从屏幕外淡入）。

@keyframes div
   0%
     opacity: 0;
   

@keyframes divHover
   50%
      top: 200px;
   
   100%
      top: 0px;
   

#div
   opacity: 1;
   animation: div 1s;
   position: absolute;
   left: 0px;
   top: 0px;

#div:hover
   animation: divHover 1s linear 0s infinite;

   <div id="div"> abc </div>

预期： div开始不可见并淡入。当div悬停时，它会上下移动，并在悬停时继续这样做。停止悬停后，div 停止动画并保持其完全不透明度

实际： 停止悬停后，div 停止动画，但不透明度恢复为 0，然后需要一秒钟才能再次显示开始动画。

https://jsfiddle.net/odq125Lu/6/

【参考方案1】：

问题是由于您使用 up & down 动画覆盖了第一个 opacity 动画，然后当您再次悬停时再次激活第一个动画。

您可以使用多个动画并考虑animation-play-state 来激活第二个：

@keyframes div 
  0% 
    opacity: 0;
  


@keyframes divHover 
  50% 
    top: 200px;
  
  100% 
    top: 0px;
  


#div 
  opacity: 1;
  animation: 
    div 1s,
    divHover 1s linear 0s infinite;
  animation-play-state:running,paused;
  position: absolute;
  left: 0px;
  top: 0px;
  background:red;
  padding:20px;


#div:hover 
  animation-play-state:running,running;

<div id="div"> abc </div>

【讨论】：

这样就解决了。但我真正想要的是让 div 恢复其默认值。当我停止悬停它时，那个“abc”立方体应该回到顶部。我需要元素在动画的 0% 处暂停。

@Prinzherbert 在这种情况下只需执行以下操作：jsfiddle.net/3ntj2e8L

【参考方案2】：

我不是专家，但这可能与您没有为动画“divHover”设置 100% 值有关？

@keyframes div
   0%
     opacity: 0;
   
   100% 
     opacity: 1;
   

【讨论】：

尝试从#div 中移除不透明度值 - 让关键帧来处理不透明度。

在大括号和动画名称之间加一个空格！

呃...我试过了，但这并没有改变任何东西。