当有人在我的横幅中悬停时,我想使用一个过渡+转换。 这里的例子是:
#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; 在#横幅而不是#横幅中:悬停。
你应该这样做:
#banner {
transform: scale(1, 1);
transition: all 300ms;
}
#banner:hover {
transform: scale(1.01, 1.01);
}
若要双向保留动画,请在初始状态上使用transition
,而不是在:hover
One:
null
#banner {
background: red;
transform: scale(1);
transition: all 300ms; /* HERE! */
}
#banner:hover {
transform: scale(1.2);
}
<div id="banner">HOVER ME</div>