質問: ### 分からないこと cssアニメーションとjQueryを使ってWEB上で動かす事を独学で始めている初心者です。 このサイトのように タイトルや画像が表示される前にアニメーションで右から左へ消え、その後タイトルや画像が表示される仕組みが気になり 調べておりますがどのように実装しているのかいまいち分かりません。 ### 実装したこと 下に自分が書いたコードがありますが ・赤い部分が画像からはみ出ているので画像の部分だけでアニメーションしたい ・アニメーションが終わると画像の上に赤いのが元の位置に戻るため画像が見えない ・赤い部分が画像をすべて包んで止まった後に左へ流れてほしい 上記3つを直したいのですが、どこになにを書き込めばいいのかわからない状況です。 自分なりに調べこのやり方であってるいるのかわからないまま実装してます。 他に簡単なやり方や間違った書き方している場合教えていただけたら幸いです。 教えていただきましたで動いて見えるようにいたしましたのでご確認ください。 こちらから 参考にさせていただいたサイトです 電光掲示板のように横から文字を流す方法【HTML5・CSS3】 宜しくお願い致します。
回答: https://jsfiddle.net/cuttlefish/c8qjxurw/ こんな感じに書いてみました。 この内容ですとjQueryを用いなくても実装できると思います。 @keyframesを編集することで、タイミングを書き換えることができます。 また、animation-fill-modeを指定することでアニメーションの効果を終了後も持続させられます。 ::afterを用いることで擬似要素を作り出し、positionで浮かべてやるとタグ一つでできるようになります。