Is it possible to transition placeholder text from beginning to end?

问题

I would like to transition a single line of dynamic placeholder text from beginning to end within a text input of known width (which hides overflow)

Now I know that for a regular container div I can make use of transforms to transition the correct length...

so for a container of length 100px I could transition to the end of the text with: transform: translateX(calc(100px - 100%)

div {
  width: 100px;
  border: 2px solid green;
  margin: 10px;
  padding: 5px;
}
div {
  white-space: nowrap;
  overflow: hidden;
}
span {
  display: inline-block;
  animation: 4s scrollText forwards;
}

@keyframes scrollText {
  to {
      transform: translateX(calc(100px - 100%));
  }
}

<div><span>some really really really long text here</span></div>

I was wondering if I could achieve the above effect with placeholder text using the placeholder pseudo element.

So I tried the following:

input {
  width: 100px;
  border: 2px solid green;
  margin: 10px;
  padding: 5px;
}

input::placeholder {
  color: red;
  animation: 4s scrollText;
  transform: translateX(0);
}

@keyframes scrollText {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(calc(100px - 100%));
  }
}

<input type="text" placeholder="some really really really long text here">

... but the above snippet doesn't work because of a limitation of the properties available on the placeholder pseudo element

All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element.

Unfortunately, transform¹ doesn't appear in that list.

So I was wondering if there is another way of achieving this - possibly with other properties which are supported by the placeholder pseudo element.

Strangely enough, the transform property did seem to (sort of) work on Chrome when used without the calc function and the animation.

input {
  width: 100px;
  border: 2px solid green;
  margin: 10px;
  padding: 5px;
}

input::placeholder {
  color: red;
  transform: translateX(-50%);
}

<input type="text" placeholder="some really really really long text here">

回答1:

You can simulate this using an extra wrapper without really using a placeholder on the input element:

input {
  width: 100px;
  border: 2px solid green;
  padding: 5px;
  vertical-align:top;
  background:transparent; /* a transparent background to show the pseudo element */
}


.input {
  display:inline-block;
  margin: 10px;
  position:relative;
  z-index:0;
  overflow:hidden;
}

.input:before {
  content:attr(placeholder);
  position:absolute;
  left:5px;
  top:5px;
  white-space:nowrap; /* no line break */
  color: red;
  pointer-events:none; /* avoid any interaction */
  animation: 4s scrollText forwards;
  z-index:-1;
}

@keyframes scrollText {
  to {
      transform: translateX(calc(100px - 100%));
  }
}

/* hide the before on focus */
.input:focus-within:before{
   visibility:hidden;
}

/* add background to hide the before when there is text and no focus*/
input:not(:placeholder-shown) {
  background:#fff;
}

<div class="input" placeholder="some really really really long text here">
<input type="text" placeholder=" "> <!-- needs an empty placeholder for :placeholder-shown -->
</div>

来源：https://stackoverflow.com/questions/55901797/is-it-possible-to-transition-placeholder-text-from-beginning-to-end

标签

css

placeholder