CSS悬停在初始动画后不起作用

Posted 2023-03-06

【中文标题】CSS悬停在初始动画后不起作用

【英文标题】：CSS hover not working after initial animation

【发布时间】：2019-08-08 01:15:06

【问题描述】：

我有一个基本按钮，我最初会为它制作动画。但是一旦动画，我想在悬停时添加一个新动画；但它似乎由于某种原因不起作用。

例如：

按钮动画：

.container 
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100%;
  overflow: hidden;


.slide-btn 
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background-color: #feffff;
  box-shadow: 0 2px 20px 0 #686f7638;
  margin-top: 10px;
  width: 45px;
  height: 45px;
  animation: testing 1s ease-in forwards;


.slide-btn:hover 
  transform: scale(1.5);


@keyframes testing 
  to 
    transform: translateX(100px);
  

<div class="container">
  <div class="slide-btn">></div>
</div>

我的猜测是，对于 CSS 动画，我使用的是 forwards，但我确实需要 forwards。

【问题讨论】：

如果我理解正确：按钮一直向右移动，当悬停时，它会缩放 1.5。在您的理想世界中：您是否希望按钮在悬停时继续移动（如果您不跟随它，最终会使其未悬停）？悬停后动画是否继续播放（未悬停时 scale=1）？

【参考方案1】：

是的，这是因为forwards 使动画覆盖了变换。而不是 forwards 你可以像下面这样：

.container 
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100%;
  overflow: hidden;


.slide-btn 
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background-color: #feffff;
  box-shadow: 0 2px 20px 0 #686f7638;
  margin-top: 10px;
  width: 45px;
  height: 45px;
  transform: translateX(100px);
  transition:0.5s;
  animation: testing 1s ease-in;


.slide-btn:hover 
  transform: translateX(100px) scale(1.5);


@keyframes testing 
  from 
    transform: translateX(0px);
  

<div class="container">
  <div class="slide-btn">></div>
</div>

【讨论】：

我试图避免设置初始变换值。这就是为什么我需要前锋。有没有其他办法？

@Doodoo 你想在悬停时进行过渡吗？如果您不需要过渡，我还有另一种方式与转发

是的，我需要在悬停时进行过渡，以及带有前移的初始动画

你找到解决方案了吗？

【参考方案2】：

如何将 'animation-fill-mode: none' 添加到 '.slide-btn:hover'：

.slide-btn:hover 
    animation-fill-mode: none;
    transform: scale(1.5);