I would like to use @keyframes and animation to add a background color that moves by the length of the text, but if I specify the length (width) as a percentage, the text will stick out when shrinking responsively The

. 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%;}

How can I make the @keyframes length specification follow the variable text width?

I would like to implement an action that moves the yellow line of "What can I do because it is a nice day"?

Sample site

Can I just use @keyframes to make it look like the above site?

  • Answer # 1

    It seems that the link destination is not the background color, but the after pseudo-element is moved over the text.



    . 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;}

    Moving sample