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

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

1 个答案: