css - 动画在悬停时和悬停时都不起作用

Question

我的动画似乎不想在悬停时同时出现。我试过将动画线放在 LI:before 本身上并交换 0% 和 100% 但之后什么也没有发生。我已经弄乱它​​几个小时都无济于事。

编辑:更新链接、代码

JSFiddle

    ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style-type: none;
  background-color: $base-gray-t;
  margin: 1em;
  padding: .25em 0 0 0;
  height: 3em;
  border-bottom: 0.375em solid $secondary-color;
  overflow: hidden;
  box-shadow: .05em .05em 1em 0;
}

li {
  position: relative;
  color: $base-gray-light;
  padding: 0.40em;
  font-size: 1.5em;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  z-index: 2;
}

li:not(.active):not(:first-child):before {
  content: '';
  display: block;
  position: absolute;
  bottom: .01em;
  width: 100%;
  height: 2em;
  margin-left: -.4em;
  border-radius: .25em .25em 0 0;
  z-index: -1;
}

li:hover:before {
  background: $primary-color;
  animation: splash .3s ease;
  bottom: .01em
}

@keyframes splash {
  0% {
    bottom: -2em;
    border-radius: 100%;
  }
  100% {
    bottom: .01em;
  }
}

Answer 1

如果您正在尝试完成您在 hover 上创建的 animation，那么为此添加 forwards 以及您的 animation属性如下，

li:hover:before {
  background: $primary-color;
  animation: splash .3s ease forwards;
  bottom: .01em
} 

检查此工作 jsfiddle链接。