@keyframes 、 animationで、テキストの長さの分だけ動く背景色をつけたい

Question

@keyframes 、animationを使って、テキストの長さの分だけ動く背景色をつけたいのですが、長さ（幅）を％指定すると、レスポンシブで縮めたときに、テキストがはみ出してしまいます。

.animation-duration-1s p {
  width: 100%;
  height: auto;
  background: #00619a;
  animation-name: animation-text;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
animation-fill-mode:forwards;
	text-align: left;
/*	display: inline-block;*/

@keyframes animation-text {
  0% {width: 100px;}
  100% {width: 50%;}
}
}

@keyframesの長さの指定を可変するテキストの幅に合わせて追従するようにするにはどうしたらよいでしょうか？

本来は、下記サイトと同じように、「ナイスデイだから、できること。」の黄色いラインが動く動作を実装したいです。

見本サイト

上記サイトのようにするには、@keyframes だけでできますか？

よろしくお願いします。

Comments

[hatena19]

HTMLのコードも提示してください。

[konoha0708]

すみません。下記の通りです。
<div class="animation-duration-1s"><p>ABCDEFG/p></div>

Answer 1

リンク先は背景色ではなく、after疑似要素をテキストに被せて移動させているようです。

<div class="animation-duration-1s">
  <P>
    ABCDFGHIJKLMN
  </P>
</div>

.animation-duration-1s{
  font-size: 30px;
  height: 40px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.animation-duration-1s P{
  margin: 0;
  animation: text-Fadein  1s 1s;
  animation-fill-mode:both;
}

.animation-duration-1s:after{
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  background-color: #fcd005;
  animation: animation-Overlay 2s 0s;
  animation-fill-mode:both;
}

@keyframes animation-Overlay {
  0% {left: -100%;}
  50%{left:0}
  100% {left: 100%;}
}

@keyframes text-Fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } 
}

動くサンプル

Comments

[konoha0708]

after疑似要素を使うのですね。動くサンプルまで書いていただき、感謝します。
理想の動きが実現できました。
本当にありがとうございました。