CSS animation keyframes

Question

前提・実現したいこと

現在左から右へメッセージを徐々に表示し、
徐々に戻るというアニメーションを作っています
表示するメッセージ画像は4つです
4つの表示時間の間隔をうまく指定できません
下記ソースを実行すると4つ目が終わったあとに間が空いてしまいます
全て均等に表示時間を設定するには％をいじると思うのですが、
どうやってみても均等にすることができません
それとなぜかopacityの設定も効いてません(左から出てくるときに徐々に表示、消える時に徐々に消えるようにしたい)
CSS初心者で無駄が多い書き方になってると思いますが、教えていただけると幸いです

該当のソースコード

<style>
body,html{
background:black;
height:100%;
}
.a {
width:30%;
height:10%;
transform:translateX(-500%);
left:0%;
top:0%;
position:absolute;
background:transparent url('') no-repeat center;
background-size:contain;
animation: a_ 35s infinite;
opacity:0;
}

@keyframes a_ {
0%,20%,40%,60%,80%,100%{
transform:translateX(-500%);
opacity: 0;
}
3%,18%{
background:transparent url('http://placehold.jp/24/cccccc/ffffff/250x50.png?text=こんにちわ1') no-repeat center;
background-size:contain;
transform:translateX(10%);
opacity: 1;
}
22%,38%{
background:transparent url('http://placehold.jp/24/cccccc/ffffff/250x50.png?text=こんにちわ2') no-repeat center;
background-size:contain;
transform:translateX(10%);
opacity: 1;
}
42%,58%{
background:transparent url('http://placehold.jp/24/cccccc/ffffff/250x50.png?text=こんにちわ3') no-repeat center;
background-size:contain;
transform:translateX(10%);
opacity: 1;
}
62%,78%{
background:transparent url('http://placehold.jp/24/cccccc/ffffff/250x50.png?text=こんにちわ4') no-repeat center;
background-size:contain;
transform:translateX(10%);
opacity: 1;
}
}
</style>

<div class="a"></div>

Comments

[hatena19]

タイトルは質問内容を表すもの変更してください。

[gentaro]

よく見かけるけど初心者を名乗る人が「詳しい方いますか？」って、オメーはどこに来て質問してるつもりなんだ？と思ってしまう言葉だ。

[退会済みユーザー]

それと同時にあなたは何様なんでしょうね

[gentaro]

「同時に」ってことは自分でも言われた内容には納得はできてるのね。なかなかお利口さんだなぁ。

[退会済みユーザー]

teratailの一利用者の分際で偉そうなこったなぁ

[gentaro]

「teratailの一利用者の分際」って利用者全てを見下すとはなかなか偉そうな人だなぁ。

[退会済みユーザー]

オメーはどこに来て質問してるつもりなんだ？と思ってしまう言葉
↑これってteratailがレベルが低すぎて詳しい奴なんていないって意味だったのかな
脳内完結してて意味不明だよね

[退会済みユーザー]

誰がいつ利用者全てを見下したんだろう
お前さんに突き付けただけだよ

[gentaro]

ギャグで言ってる？本気だとしたら国語力なさすぎて笑ってしまうけど。「脳内完結してて意味不明」ってブーメランにしかなってない。
自分が初心者を名乗ってるなら、回答する人は全員「お前より詳しい人」だろ、という意味以外何があるの？医者に行って「医療に詳しいお医者さんお願いします」とか言うか？こいつバカにしてんの？って反応になるからやめとけ、という話なんだが。

[退会済みユーザー]

回答ができる人間がいるかわからないから詳しい人って言ってるんだろ、アホはお前さんだろｗ
しかもteratailはジャンル分けされてるわけでｗ

難癖付ける暇があるならまともな回答の一つでもしてから言うんだなｗ
ぶっひゃひゃひゃｗｗ

[gentaro]

頭大丈夫？まともに質問のタイトルも書けずに注意されてるヤツの言うことじゃねーぞ。ことごとくブーメランだわ。

Answer 1

4個の画像を切り替えるので、一つの画像のアニメーションは25%の幅で完結するように設定すれば間隔は同じなるでしょう。
あと、transition-timing-function を linear にしておかないと、初期値はeaseなので最初と最後で動きが変化するので間隔が同じにならないですね。

下記のような感じでしょうか。細かい動きは%を調節してください。

body,html{
  background:black;
  height:100%;
}
.a {
  width:30%;
  height:10%;
  left:0;
  top:10px;
  position: absolute;
  background: center / contain no-repeat; 
  animation: a_ 20s linear infinite; 
  opacity:0;
}

@keyframes a_ {
  0%{
    background-image: url('http://placehold.jp/24/cccccc/ffffff/250x50.png?text=こんにちわ1');
    transform:translateX(-100%);
    opacity: 0;
  }
  10%,15%{
    transform:translateX(10%);
    opacity: 1;
  }
  25%{
     background-image: url('http://placehold.jp/24/cccccc/ffffff/250x50.png?text=こんにちわ1');
    transform:translateX(-100%);
    opacity: 0;
  }
  25.1%{
    background-image: url('http://placehold.jp/24/cccc00/ffffff/250x50.png?text=こんにちわ2');
    transform:translateX(-100%);
    opacity: 0;
  }
  35%,40%{
    transform:translateX(10%);
    opacity: 1;
  }
  50%{
    background-image: url('http://placehold.jp/24/cccc00/ffffff/250x50.png?text=こんにちわ2');
    transform:translateX(-100%);
    opacity: 0;    
  }
   50.1%{
    background-image: url('http://placehold.jp/24/cc00cc/ffffff/250x50.png?text=こんにちわ3');
    transform:translateX(-100%);
    opacity: 0;
  }
  60%,65%{
    transform:translateX(10%);
    opacity: 1;
  }
  75%{
    background-image: url('http://placehold.jp/24/cc00cc/ffffff/250x50.png?text=こんにちわ3');
    transform:translateX(-100%);
    opacity: 0;    
  }
  75.1%{
    background-image: url('http://placehold.jp/24/00cccc/ffffff/250x50.png?text=こんにちわ4');
    transform:translateX(-100%);
    opacity: 0;
  }
  85%,90%{
    transform:translateX(10%);
    opacity: 1;
  }
  100%{
    background-image: url('http://placehold.jp/24/00cccc/ffffff/250x50.png?text=こんにちわ4');
    transform:translateX(-100%);
    opacity: 0;    
  }
}

@keyframes は下記のようにまとめて記述すると短くできますね。

@keyframes a_ {
  10%,15%, 35%,40%, 60%,65%, 85%,90%{
    transform:translateX(10%);
    opacity: 1;
  }
 0%, 25%, 50%, 75%, 100%{
    transform:translateX(-100%);
    opacity: 0;
  }
 0%, 25%{
    background-image: url('http://placehold.jp/24/cccccc/ffffff/250x50.png?text=こんにちわ1');
  }
  25.1%, 50%{
    background-image: url('http://placehold.jp/24/cccc00/ffffff/250x50.png?text=こんにちわ2');
  }
  50.1%, 75%{
    background-image: url('http://placehold.jp/24/cc00cc/ffffff/250x50.png?text=こんにちわ3');
  }
  75.1%, 100%{
    background-image: url('http://placehold.jp/24/00cccc/ffffff/250x50.png?text=こんにちわ4');
  }
}

Comments

[退会済みユーザー]

詳しい回答ありがとうございました
勉強になります
均等にするには細かく%を指定する必要があるんですね

あと、
私の書いたソースのopacityはなぜ動かなかったのか、わかりますか？

[hatena19]

opacityは変化していると思います。
ただ、translateX(-500%) から translateX(10%) まで移動させているので、これだと、大部分が画面外なので、見えている部分での変化が少ないだけだと思います。
translateX(-100%)にすると変化が分かると思います。