css - 动画图标在关键帧期间向左移动

Question

我在一个图标中创建了一组动画箭头。到目前为止，一切都很好。然而，它在序列中突然向左移动了片刻，这使得整个动画摇晃。

这是查看动画效果的笔: https://codepen.io/erwinvanlun/pen/VxWQQy?editors=1100

代码下方。知道发生了什么事吗？

HTML:

<div style="font-size: 150px; line-height: 100%;
            color: darkgrey;">
  <i class="icon-fold"></i></div>

CSS:

i.icon-fold {
  position: relative;
  display: inline-block;
  font-style: normal;
  box-sizing: border-box;
}

i.icon-fold {
  vertical-align: bottom;
  margin: .1em .2em 0 .2em;
  border: .3em solid transparent;
  border-bottom-color: currentColor; 
  border-width: 0;
  animation: scale 5s linear infinite; 
  animation-play-state: paused;
}

i.icon-fold:before, i.icon-fold:after {
  content: "";
  position: absolute;
  box-sizing: border-box; 

  left: -.3em;
  border: .3em solid transparent;
  border-bottom-color: currentColor;
}

i.icon-fold:before {
  top: -.9em;
  transition: opacity 5s linear;  

  animation: fade 5s linear infinite;
  animation-play-state: paused; 
}

i.icon-fold:after {
  top: -.6em;
}

i.icon-fold:hover, {
  animation-play-state: running; 

  &:after, &:before {
  // transform:translateY(-.1em);
    animation-play-state: running; 
  }
  }

@keyframes fade {
  0% {
    opacity: 1;

  }
  99% {
    opacity: 0; 
  }
}

@keyframes scale {
  0% {
    left: .3em;
    border-width: 0;
  }
  99% {
    left: 0em;
    border-width: .3em;
  }
}

Answer 1

在关键帧中请使用 100% 而不是 99%

@keyframes fade {
  0% {
    opacity: 1;

  }
  100% {
    opacity: 0; 
  }
}

@keyframes scale {
  0% {
    left: .3em;
    border-width: 0;
  }
  100% {
    left: 0em;
    border-width: .3em;
  }
}