Question

枝！

使用动画填充模式动画后转换不起作用：转发; 第一个动画在悬停时触发并结束，但是在取消悬停转换后不适用。

Codepen here

它在铬和野生动物园中繁殖。在Firefox中运行正常。

哈巴狗：

button Button

SCSS：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

button {
  padding: 5px 0;
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;

  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 100%;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: blue;
    transition: all .25s;
  }

  &:hover {

    &:before {
      animation: nav-link-hover .25s forwards;
    }
  }
}

@keyframes nav-link-hover {

    0% {
        left: 0;
        right: 100%;
    }

    100% {
        left: 0;
        right: 0;
    }
}

更新
我已找到解决方法，但会等待任何答案，并乐意接受它，如果它会更好或例如成功使用破坏的关键帧。

Answer 1

仍然不知道chrome / safari中的关键帧有什么问题，但找到了简单的解决方法。

现在首先'before'元素在右侧，没有宽度right: 0; width: 0;。
在悬停时，它以100％宽度向左移动，开始过渡增长：left: 0; right: auto; width: 100%;。<登记/> 最后，当悬停丢失时，“之前”开始减少，再次停留在右端。

新代码：

button {
  padding: 5px 0;
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;

  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 4px;
    border-radius: 2px;
    background: blue;
    transition: all .25s;
  }

  &:hover {

    &:before {
      left: 0;
      right: auto;
      width: 100%;
    }
  }
}

Codepen

Answer 2

在动画开始之前，动画元素需要定义的状态。如果在触发器上定义状态（即悬停），则可能会发生一些意外行为。因此，您应该在悬停之前设置起点。

在这种情况下，只需将left: 0;从悬停移动到＆＃34;非悬停＆＃34; &:before

的属性

button {
  padding: 5px 0;
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;

  &:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    width: 0;
    height: 4px;
    border-radius: 2px;
    background: blue;
    transition: all .25s;
  }

  &:hover {

    &:before {
      right: auto;
      width: 100%;
    }
  }
}

动画转发后，转换不起作用

2 个答案: