html - 悬停时，如何覆盖现有的动画样式？

Question

请参阅下面的代码段。请注意，当您将鼠标悬停在某个元素上时，该元素的背景颜色会发生变化，但 transform: translateY(-5px) 会被忽略。悬停的变换样式仅在未设置 .list-item 动画时有效。

如何让 translateY(-5px) 悬停在代码中工作？

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;

  animation-name: popin;
  animation-fill-mode: both;
  animation-duration: .6s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}

.list-item:hover {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
  100%{
    transform:scale(1);
  }
}

<div class="list">
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
</div>

更新

我还需要在翻译完成后进行转换。

Answer 1

从动画中移除最后一个状态，因为它是默认状态，您将能够覆盖转换。基本上，动画会将元素的状态视为 100%，当您在悬停时更改它时，它也会在动画中发生变化。

If a 100% or to keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.^ref

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;

  animation-name: popin;
  animation-fill-mode:both;
  animation-duration: .6s;
  /*animation-iteration-count: 1; also not needed */
  animation-timing-function: ease;
  animation-delay: 0.1s;
}

.list-item:hover {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
}

<div class="list">
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
  <div class="list-item">item</div>
</div>

更新

如果你想要过渡，你可以稍微调整代码，让两个元素可以很容易地独立应用变换:

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;

  animation-name: popin;
  animation-fill-mode:both;
  animation-duration: .6s;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}
.list-item:before {
  content:attr(data-text);
  display:block;
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;
  transition:1s all;
}

.list-item:hover:before  {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
}

<div class="list">
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
  <div class="list-item" data-text="item"></div>
</div>

您还可以考虑像下面这样的额外包装器:

.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px 0;
}

.list-item {
  cursor: pointer;
  margin-bottom: 14px;

  animation-name: popin;
  animation-fill-mode:both;
  animation-duration: .6s;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}
.list-item > div {
  padding: 12px 16px;
  border-radius: 50px;
  background: #EFEFEF;
  transition:1s all;
}

.list-item:hover > div  {
  background-color: yellow;
  transform: translateY(-5px);
}

@keyframes popin {
  0%{
    transform:scale(0);
  }
  50%{
    transform:scale(1.1);
  }
}

<div class="list">
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
  <div class="list-item"><div>item</div></div>
</div>