☰

CSS アニメーションをループする 質問する

tag-icon • tag-icon css css-animations
CSS アニメーションをループする 質問する

HTML と CSS を学習しようとしているのですが、次のような問題が発生しました:

<style style="text/css">
    div.slide-slow {
        width: 100%;
        overflow: hidden;
    }

    div.slide-slow div.inner {
        animation: slide-slow 30s;
        margin-top: 0%;
    }

    @keyframes slide-slow {
        from {
            margin-left: 100%;
        }

        to {
            margin-left: 0%;
        }
    }
</style>

<div class="slide-slow">
    <div class="inner">
        <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
    </div>
</div>

この CSS をループさせ、完了時に停止しないようにしたいです。 CSS 関数をループさせることは可能ですか?

ベストアンサー1

使用animation-iteration-count: infinite数値でループを制限します。

<style style="text/css">
  div.slide-slow {
    width: 100%;
    overflow: hidden;
  }
  div.slide-slow div.inner {
    animation: slide-slow 3s;
    margin-top: 0%;
    animation-iteration-count: infinite;
  }
  @keyframes slide-slow {
    from {
      margin-left: 100%;
    }
    to {
      margin-left: 0%;
    }
  }
</style>

<div class="slide-slow">
  <div class="inner">
    <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
  </div>
</div>

追加：イスマエルの提案である、フリップ効果のある前後のアニメーションを実現するには、rotateY(180deg)静止した場所で反転させるのではなく、水流の流れに沿って後方に動いているかのように魚を回転させる（通常のアニメーション）のが効果的です。ease-in-outタイミング機能の維持に役立ちます。width: 40vw回転機能がわずかに応答性/ビューポート依存になり、オフセットが大きすぎると回転しないようにするために使用しました。

適切なアニメーションを実現するには、余白と幅の値を調整してください。

<style style="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  div.slide-slow {
    width: 100%;
    overflow: hidden;
  }
  div.slide-slow div.inner {
    animation: slide-slow 15s;
    margin-top: 0%;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    width: 40vw;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }
  @keyframes slide-slow {
    0% {
      margin-left: 85%;
    }
    25% {
      margin-left: 20%;
      transform: rotateY(0deg);
    }
    50% {
      margin-left: -25%;
      transform: rotateY(180deg);
      transform-origin: center center;
    }
    75% {
      margin-left: 50%;
      transform: rotateY(180deg);
    }
    100% {
      margin-left: 85%;
      transform: rotateY(0deg);
    }
  }
</style>

<div class="slide-slow">
  <div class="inner">
    <img src="https://i.sstatic.net/nJAsS.gif" alt="Swimming fish">
  </div>
</div>

（画像出典：http://www.html.am/images/html-codes/marquees/fish-swimming.gif）

おすすめ記事