3

これは私のアニメーションです:

.ani span {
  animation: animation 1s infinite;
  display: inline-table;
}

@keyframes animation {
  0% {
    transform: translateY(0px);
  }
  33.333% {
    transform: translateY(-5px);
  }
  66.666% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.ani span:nth-child(1) {
  animation-delay: .1s;
}

.ani span:nth-child(2) {
  animation-delay: .2s;
}

.ani span:nth-child(3) {
  animation-delay: .3s;
}

.ani span:nth-child(4) {
  animation-delay: .4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ani"><span>h</span><span>e</span><span>l</span><span>l</span><span>o</span></div>

このアニメーションが必要なさまざまなテキスト (»hello« だけでなく) を作成します。なので、jQuery関数として持っていれば良いのです。テキストの長さが計算され、自動的に配置され<span></span>、フィッティングが行われanimation-delayます。

それをどのようにコーディングできますか？

助けてくれて本当にありがとう。

4

2 に答える 2