右から左へ要素が動いて消え、消えた後に文字や画像が表示される仕組み

Question

###分からないこと
cssアニメーションとjQueryを使ってWEB上で動かす事を独学で始めている初心者です。
このサイトのように
タイトルや画像が表示される前にアニメーションで右から左へ消え、その後タイトルや画像が表示される仕組みが気になり
調べておりますがどのように実装しているのかいまいち分かりません。

###実装したこと
下に自分が書いたコードがありますが

・赤い部分が画像からはみ出ているので画像の部分だけでアニメーションしたい
・アニメーションが終わると画像の上に赤いのが元の位置に戻るため画像が見えない
・赤い部分が画像をすべて包んで止まった後に左へ流れてほしい

上記３つを直したいのですが、どこになにを書き込めばいいのかわからない状況です。
自分なりに調べこのやり方であってるいるのかわからないまま実装してます。
他に簡単なやり方や間違った書き方している場合教えていただけたら幸いです。

教えていただきましたで動いて見えるようにいたしましたのでご確認ください。
こちらから

参考にさせていただいたサイトです
電光掲示板のように横から文字を流す方法【HTML5・CSS3】

宜しくお願い致します。

Comments

[orange-lion]

CSSなどの見た目やアニメーションに分類されるような質問をされる時は何か既に動いているようなものをホスティングした方が回答が得られやすいです。例えば https://jsfiddle.net/ のようなものや https://codepen.io/ のようなものに書いた状態で持ってくると良いと思います

[satoshickkk]

回答ありがとうございます。教えていただいたサイトを試してみて再度回答し直そうかと思います！教えていただきありがとうございます。

Answer 1

https://jsfiddle.net/cuttlefish/c8qjxurw/
こんな感じに書いてみました。
この内容ですとjQueryを用いなくても実装できると思います。
@keyframesを編集することで、タイミングを書き換えることができます。
また、animation-fill-modeを指定することでアニメーションの効果を終了後も持続させられます。
::afterを用いることで擬似要素を作り出し、positionで浮かべてやるとタグ一つでできるようになります。

Comments

[satoshickkk]

im_cuttlefish様、ご回答ありがとうございます。
この赤い部分が画像全体を包んだらそこで動きを一回止め、0.5秒ぐらい経ったら右に流そうと
思っているのですがこの動きはcssのみでの実装は可能でしょうか？

[im_cuttlefish]

@keyframes marquee {
from {
transform: translateX(-100%);
}
30%, 70% {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}

こうCSSの冒頭部を書き換えれば大丈夫です。
transformが0のときが全体が覆われているときなので！

[satoshickkk]

im_cuttlefish様
0に設定すればすべて覆われるのですね！
ありがとうございます、無事に思い通りの動きになりました！