При наведении курсора, как переопределить существующий стиль анимации?

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>

UPDATE

Мне также нужен переход после завершения перевода.

Answer 1

Удалите последнее состояние из анимации, так как оно по умолчанию, и вы сможете переопределить преобразование.По существу, анимация будет рассматривать состояние элемента как 100%, и при его изменении при наведении курсора оно также будет меняться в анимации.

Если 100% или ключевой кадр не указан,затем пользовательский агент создает 100% ключевой кадр, используя вычисленные значения анимируемых свойств. ^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>

Answer 2

Я действительно столкнулся с подобной проблемой на днях. Я не могу сказать вам, почему это ведет себя так, но я могу сказать вам, как я это решил. Я создал другую анимацию и активировал ее на hover. Я использовал animation-fill-mode: forwards, поэтому анимация вернется в исходное состояние только после того, как вы переместитесь в другое место. Попробуйте и дайте мне знать, что вы думаете.

.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;
  border-color: black;
  border: 1px solid black;
  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 {
  animation: pull-up 0.3s ease-in-out forwards;
  background-color: yellow;
}

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

@keyframes pull-up {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-5px);
    }
}

<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>