Question

我正在尝试这样做，当你将鼠标悬停在这个div上时，它会慢慢从页面侧面向外扩展。我意识到我可以在悬停时设置一个新位置，但它不会从侧面慢慢拉出来。我的代码可能主要有缺陷，但我不完全确定如何解决它。任何帮助都会很棒。谢谢！

#bod {
  background-color: red;
  height: 100px;
  width: 200px;
  border: 2px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-left: -90px;
  float: left;
  animation-name: moves;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-direction: alternate;
}
#bod:hover {
  cursor: pointer;
  @keyframes moves {
    from {
      margin-left: -90px;
    }
    to {
      margin-right: -10px;
    }
  }
}

<h1>Test</h1>
<div id="bod"></div>

Answer 1

您的语法不正确。要在悬停时将动画应用于元素，请更改animation属性，而不是像您一样添加@keyframes声明。

此外，您正在将从 margin-left 动画到 margin-right，这可能不是您想要的。这是一个动画margin-left属性的更新示例。我还使用animation shorthand来压缩代码。

您可能还希望将animation-fill-mode property值更改为前进，以便在动画结束时保留最终的关键帧：

＆＃13;

#bod {
  background-color: red;
  height: 100px;
  width: 200px;
  border: 2px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-left: -90px;
  float: left;
}

#bod:hover {
  cursor: pointer;
  animation: moves 4s forwards;
}

@keyframes moves {
  from {
    margin-left: -90px;
  }
  to {
    margin-left: -10px;
  }
}

＆＃13;

<h1>Test</h1>
<div id="bod"></div>

＆＃13;

作为旁注，转换也可能更好，因为当您的动画悬停时它不会反转。以下是使用CSS3过渡的类似示例：

＆＃13;

#bod {
  background-color: red;
  height: 100px;
  width: 200px;
  border: 2px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-left: -90px;
  float: left;
  transition: margin-left 4s;
}

#bod:hover {
  cursor: pointer;
  margin-left: -10px;
}

＆＃13;

<h1>Test</h1>
<div id="bod"></div>

＆＃13;

Answer 2

尝试为margin-left和margin-right添加值。并取出@keyframes。它就像魔法一样。见下文。

#bod {
  background-color: red;
  height: 100px;
  width: 200px;
  border: 2px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-left: -90px;
  float: left;
  animation-name: moves;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-direction: alternate;
}
#bod:hover {
  cursor: pointer;
  animation: moves;
}

@keyframes moves {
  from {
    margin-left: -90px;
    margin-right: 0;
  }
  to {
    margin-left: 0;
    margin-right: -10px;
  }
}

<h1>Test</h1>
<div id="bod"></div>

将鼠标悬停在元素上时，如何运行此动画？

2 个答案: