Home>

css3 - with @keyframes and animation, i want to add a background color that moves by the length of the text

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?

css3
  • Answer # 1

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

    
  
    
    ABCDFGHIJKLMN
  
    

    . 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

Related articles