如何制作“取消悬停”动画？ [复制]答案

【问题标题】：How can I do a "un hover" animation? [duplicate]如何制作“取消悬停”动画？ [复制]
【发布时间】：2020-11-21 09:41:47
【问题描述】：

当有人悬停在我的横幅上时，我想使用过渡 + 变换。这里是例子：

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

但是当我将鼠标移到横幅上时，它突然再次转换为 scale(1,1) 但没有过渡。我已经尝试过：not(hover) 但发生的情况是，当我刷新页面时，横幅会发生过渡。我知道如何解决这个问题。我想要的只是当我将鼠标悬停在它上面时的过渡，以及当我将鼠标从横幅上移开时的过渡，以及其他任何东西。

我看到了一些疑问，所以我要澄清一下。当我悬停横幅时，我只想要一个过渡，当我退出移动悬停时，过渡回到他的第一个比例。我在 #banner 和 #banner:hover 中有这段代码：

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

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

这里的问题是，如果我把转换：all 300ms;在我的#banner 上，当我刷新网站时，它会进行转换。

已解决：添加过渡：300ms；在#banner 而不是#banner:hover 中。

【问题讨论】：

嗨！仅将 transition: all 300ms 添加到 #banner。将其从悬停状态中移除，以便在两者上都进行动画处理。
看，如果我在#banner 中使用过渡：所有 300 毫秒，也会发生同样的事情。当我更新网站时，横幅会转变为将其置于您的网站上。
需要默认设置比例为(1,1)：#banner { transform: scale(1,1); transition: all 300ms;"}
另外，请包含一个minimal reproducible example 以及显示行为的代码。您可以使用 Stack Snippets（图标在编辑器工具栏中看起来像 <>）在 Stack Overflow 上提供一个可运行的示例。
好的......但这根本不是你的问题。没有提到第三种状态。请edit你的问题一步一步准确地反映你想要的。

标签： html css

【解决方案1】：

要同时保留动画，请在初始状态上使用transition，而不是:hover 之一：

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

#banner:hover {
  transform: scale(1.2);
}

&lt;div id="banner"&gt;HOVER ME&lt;/div&gt;

【讨论】：

【解决方案2】：

你应该这样做：

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

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

【讨论】：