スライドするように文字を表示させたい

Question

###試した事
cssアニメーションとjQueryを使って下記の動きを作成しました。
▶作成した動き

###教えていただきたい事
作成した動きを見て頂ければわかるかと思いますが、日付・タイトルの上を赤い.marqueeが通っています。
この赤く動く.marqueeのように日付・タイトルを、左→右へ表示させたいですが
どのように指定すればいいのかわからず途方に暮れております。
背景には画像が敷いてあるので色がついている赤いのは最終的に消したい(透明にしたい)のですが
色を指定しないと動かない(見えない)のでしかたなく色を付けております。

赤色のような動きで文字をなめらかに少しづつ表示できたらと思っています。
お分かりになられる方お見えになられましたらお助けください、宜しくお願い致します。

<div id="top_news" class="top_fade mincho2">
  <ul>
    <span class="top_postlist_date"><i class="fab fa-twitter"></i></span>
    <li class="su-post"><span class="marquee su-post2"><a href="#"><span class="top_postlist_date">03/05</span>記事タイトル3</a></span></li>
    <span class="top_postlist_date"><i class="fab fa-twitter"></i></span>
    <li class="su-post"><span class="marquee su-post2"><a href="#"><span class="top_postlist_date">03/04</span>記事タイトル2</a></span></li>
    <span class="top_postlist_date"><i class="fab fa-twitter"></i></span>
    <li class="su-post"><span class="marquee su-post2"><a href="#"><span class="top_postlist_date">02/28</span>記事タイトル1</a></span></li>
  </ul>
</div>

a{text-decoration: none;}
li{list-style:none;}
#top_news{
	margin-left:150px;
	text-align: left;
	position: absolute;
	bottom: 150px;
}
#top_news a{
	color:#000;
}
#top_news ul li{
	font-size: 0.8em;
	margin-bottom: 0.2em;
}

@keyframes marquee {
 from {
   transform: translateX(-100%);
 }
 to {
   transform: translateX(100%);
 }
}
.marquee {
  display: inline-block;
  position: relative;
  overflow: hidden;
  /* line-height: 0.8em; */
}

.marquee::after {
  content: "";
  display: block;
  width: 100%;
  height: 85%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background:rgba(255, 0, 0, 0.7);
  animation-name: marquee;
  animation-timing-function:ease;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

Comments

[kei344]

コードは外部サービスだけでなく、質問文にコードブロックでお書きください。

[satoshickkk]

ご指摘いただきましたコードブロック追加させていただきました。

Answer 1

右→左ということで、今動いているのとは逆かなと思うので、逆にして見ましたが、こういうことではないでしょうか。

.su-post {
	overflow: hidden;
}
.su-post2 {
  animation-name: su-post-text;
  animation-timing-function:ease;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes su-post-text {
 from {
   transform: translateX(-100%);
 }
 to {
   transform: translateX(100%);
 }
}

動作修正

animationの始まりをtranslateX(0)にして、.marquee::afterの背景を白にすればできるような…

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

.marquee::after {
  background:#fff;
}

こちらで

widthのアニメーションにしました。
サイズなど数値の調整はそちらでおこなってください。

.su-post {
	position: relative;
	height: 2em;/*この辺調整してください*/
	width: 140px;/*この辺調整してください*/
}
.su-post2 {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	
	animation-name: su-post2;
	animation-timing-function:ease;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}
.su-post2 a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 140px;/*.su-postと同じ幅にしてください*/
}
@keyframes su-post2 {
 from {
	width: 0;
 }
 to {
	width: 100%;
 }
}

Comments

[satoshickkk]

ご回答ありがとうございます。
左→右の間違いでした。申し訳ございません。
いただいたcssで一度試してみます！

[kszk311]

animationの中身を、左→右に直しておきました。

[satoshickkk]

kszk311様
わざわざ修正までしていただいてありがとうございます。
いただいたcssで試したところ想像している動きに近いのです。
日付・タイトルを動かすのではなく、
日付・タイトルの上にある要素を左→右へ動いていく感じにはできませんでしょうか…？
日付・タイトルが左から少しづつ表示されていく感じです、説明が下手で申し訳ございません。

[kszk311]

日付・タイトルは固定で、左から見えていく、ってことですかね。
その方向で追記しましたので、ご確認ください。

[satoshickkk]

何度もご回答ありがとうございます。
この動きが想像していた動きです！
ちなみに.marquee::after {background:#fff;}は透明には出来ませんでしょうか…？
背景が白の場合は修正していただいたcssで完璧なのですが
今回背景に画像を敷いているのもあり白色が見えてしまいます。

[kszk311]

再度追記しましたのでご確認ください。
widthのアニメーションにしました。

[satoshickkk]

思った通りの動きになりkszk311様には大変感謝しております。
本当にありがとうございました！

[satoshickkk]

kszk311様
何度も失礼します、動く速度を変えるにはどちらを触れば変わるかお分かりでしょうか？

[kszk311]

animation-durationの数値を変えれば、変わるかと

[satoshickkk]

全く違うところの数値を触っておりました。
何度も丁寧に教えていただきありがとうございました。