如何为状态之间的图像制作动画

Question

我想在 悬停状态 的几个州之间设置动画。

理想情况下，想模仿以下gif（我有各种文本状态）。

有人可以指出我该如何做的方向吗？我想在html / css属性上使用setInterval可以工作。

谢谢！

Answer 1

letter-spacing是一种CSS动画属性，因此您可以设置一个简单的CSS关键帧来获得这种效果。不需要JS。例如：

span {
  text-transform: uppercase;
  font-family: sans-serif;
  animation-name: space-out;
  animation-direction: alternate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.g1 { animation-delay: 0.5s; }
.g2 { animation-delay: 0s; }
.g3 { animation-delay: 1.3s; }
.g4 { animation-delay: 0.8s; }

@keyframes space-out {
  0% { letter-spacing: 0; }
  20% { letter-spacing: 1.2em; }
  50% { letter-spacing: 1.2em; }
  60% { letter-spacing: 0.3em; }
  90% { letter-spacing: 0.8em; }
  100% { letter-spacing: 0.8em; }
}

<h1>
  <span class="g1">Haus</span><span class="g2">der</span>
  <span class="g3">kun</span><span class="g4">st</span>
</h1>

Answer 2

似乎是letter-spacing动画。

这是一个简化的示例，您可以详细考虑更多的动画状态：

.box {
 display:inline-block;
 font-size:25px;
}
.box span {
  padding:0 2px;
  animation:change 1s infinite alternate;
}
.box span:last-child {
  animation-delay:0.5s;
}

@keyframes change {
 from{letter-spacing:0px}
 to{letter-spacing:15px}
}

<div class="box">
<span>Some</span>
<span>Text</span>
</div>