使用 @keyframes 进行无限循环

Question

我在垂直设置图标动画以使它们无限地相互改变时遇到问题。

问题是我有两个图标，我需要它们以（第一个图标 - 青蛙，第二个图标 - 鸟）1 -> 2 -> 1 -> 2 的方式更改，这样看起来就像一个朝一个方向的完整循环（底部），我现在所拥有的是第一个图标到第二个图标根据需要进行更改，然后我的动画返回到第一个图标，向后而不是向前。

这是代码笔

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

@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>