提问者:小点点

我怎样才能做一个“联合国悬停”动画? [副本]


当有人在我的横幅中悬停时,我想使用一个过渡+转换。 这里的例子是:

#banner:hover {
transition: all 300ms;
transform: scale(1.01, 1.01); }

但是当我把鼠标移到横幅上时,它突然又变成了scale(1,1),但是没有任何过渡。 我试过:不是(悬停),但是当我刷新页面时,横幅会发生变化。 Idk如何修复此问题。 我想要的只是当我在上面悬停时的过渡,以及当我把鼠标从横幅上移开时的过渡,任何其他的东西。

我看到了一些疑点,所以我要澄清它们。 我只想要一个过渡,当我悬停横幅和当我退出移动悬停,一个过渡回到他的第一音阶。 我在#banner和#banner:hover:

#banner {
transform: scale(1, 1); }

#banner:hover {
transition: all 300ms;
transform: scale(1.01, 1.01);}

这里的问题是,如果我把过渡:全部300ms; 在我的#banner上,当我刷新网站时,它会进行转换。

解决方案:添加过渡:300ms; 在#横幅而不是#横幅中:悬停。


共2个答案

匿名用户

你应该这样做:

#banner {
  transform: scale(1, 1);
  transition: all 300ms;
}

#banner:hover {
  transform: scale(1.01, 1.01);
}

匿名用户

若要双向保留动画,请在初始状态上使用transition,而不是在:hoverOne:

null

#banner {
  background: red;
  transform: scale(1);
  transition: all 300ms;    /* HERE! */
}

#banner:hover {
  transform: scale(1.2);
}
<div id="banner">HOVER ME</div>