带有@keyframe的无限循环

Question

我有一个问题的动画图标垂直，使他们无限地改变彼此。

问题是，我有两个图标，我需要他们改变方式(第一个图标-青蛙，第二个图标-鸟)1 -> 2 -> 1 -> 2，以便在一个方向上看起来像一个完整的循环(底部)，我现在有的是第一个图标到第二个图标的变化，然后我的动画回到第一个图标向后，而不是向前。

这是codepen

如果有人能帮我，我会很高兴的。

@keyframes rotate {
 10%, 15% {
        transform: translateY(0);
 }
 25%,36% {
        transform: translateY(-45px);
 }
}

Answer 1

这将适用于您

​

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400');
body {
  background: #643a7a;
}

.carousel {
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 30px;
  line-height: 45px;
  height: 45px;
  overflow: hidden;
}

.carousel .change_inner {
  position: relative;
  transform-origin: 0 0;
  animation: rotate 4s infinite;
}

@keyframes rotate {
  0%,
  15% {
    transform: translateY(0%);
  }
  50%,
  66% {
    transform: translateY(-45px);
  }
  90%,
  100% {
    transform: translateY(-90px);
  }
}

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'>

<div class="carousel">
  <div class="change_inner">
    <div class="element"><i class='fas fa-frog'></i></div>
    <div class="element"><i class='fas fa-dove'></i></div>
    <div class="element"><i class='fas fa-frog'></i></div>
  </div>

</div>

​