CSSアニメーションでdelayプロパティが効かない

Question

CSSでローディング画面によくある、横に流れるアニメーションを実装しようと奮闘中です。

以下のアニメーションreflectionとして設定したのですが、「３秒かけてアニメーションし、それを即座に繰り返す」という意図で次の指定をしています。

しかし「即座に繰り返す」が効かない状況です。

-moz-animation: reflection 3s ease 0s infinite;

以下は全てのコードです。

<div class="wrapper">
  <div class="reflection-img">
    <div class="reflection"></div>
  </div>
</div>

.wrapper {
    background: black;
    position: relative;
    width: 100vw;
    height: 100vh;
}
.reflection-img {
    width: 100%;
    height: 100vh;
    position: absolute;
    overflow: hidden;
}
.reflection {
    height: 100%;
    width: 10%;
    position: absolute;
    left: 0;
    background-color: rgba(255,255,255,0.2);
    -moz-animation: reflection 3s ease 0s infinite;
}
@keyframes reflection {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    80% { transform: scale(0) rotate(0deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(0deg); opacity: 1; }
    100% { transform: scale(50) rotate(0deg); opacity: 0; }
}

横着せずショートハンドをきちんと以下のように書いたのですが、同じでした。

    -moz-animation: reflection 3s ease 0s infinite;

    /* ショートハンドをやめてきちんと以下で指定しても変化なし */
    animation-duration: 3s; /* ３秒かけてアニメーション */
    animation-delay: 0s;    /* それを即座に繰り返す */

即座に繰り返す方の指定は何が間違っているでしょうか？

Answer 1

アニメーション自体は３秒ごとに繰り返されていますが

80% { transform: scale(0) rotate(0deg); opacity: 0.5; }
81% { transform: scale(4) rotate(0deg); opacity: 1; }

とあるように、３秒のうち80％の時間が経過するまでopacityが0.5になる変化のみ(ゆっくり過ぎて変化していないように見える)なので
アニメーションによってスタイルが変化した後、それが次に起こる時間まで空き時間があるように感じるのです。

３秒一杯かけて変化させるなら、今の見え方とは異なりますが、例えば下記のようになるでしょう。

0% { transform: scale(0) rotate(0deg); opacity: 1; }
100% { transform: scale(50) rotate(0deg); opacity: 1; }

もしFirefoxをお使いなら開発者ツールでアニメーションの遷移をグラフで見ることが出来るので、それを確認すると分かりやすいです。

Comments

[around30]

原因がわかってよかったです。どうもありがとうございます。