web-dev-qa-db-ja.com

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関数をループさせることは可能ですか？

csscss-animations
26
Raven

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

追加：Ismaelの提案により、フリップエフェクトを使用した前後のアニメーションを実現するには、 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="http://i.stack.imgur.com/nJAsS.gif" alt="Swimming fish">
  </div>
</div>_

（画像ソース： http://www.html.am/images/html-codes/marquees/fish-swimming.gif ）

30
Manoj Kumar

通常のanimation CSSプロパティに無限の呼び出しを追加できます。

アニメーションをよりスムーズにするために、魚が画面から消えるように追加のステップを設けることもお勧めします。それはアニメーションを完了するだけで、そうでなければ魚は消えます。

div.slide-slow {
  width: 100%;
  overflow: hidden;
}
div.slide-slow div.inner {
  animation: slide-slow 3s infinite;
  margin-top: 0%;
}
@keyframes slide-slow {
  from {
    margin-left: 100%;
  }
  75% {
    margin-left: 0%;
  }
  100% {
    margin-left: -15%;
  }
}
<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>
9
Stewartside

このプロパティを追加できます：

 div.slide-slow div.inner {
      animation-iteration-count:infinite;
 }
8
Marcos Pérez Gude

このコードを追加するだけで役立つと思います。アニメーションの方向も追加されます。

[〜＃〜] css [〜＃〜]

div.slide-slow {
   width: 100%;
   overflow: hidden;
}

div.slide-slow div.inner {
   animation: slide-slow 3s;
   margin-top: 0%;
   animation-direction: alternate;
   animation-iteration-count: infinite;
}
4
Amit singh