Javascript 是否可以在文本框中设置文本动画

我的用户体验人员提出了一个要求，即在文本框中设置文本动画。我有一个动画css类，当应用到文本框时，它会为文本框设置动画。应该是这样的

<input type="text" style="width:380px" class="login-wrongPassword" value="Animate This Text not the box">

---

是。使用

padding left

代替

transform

/* Wobble Horizontal */
@-webkit-keyframes login-wobble-horizontal {
  16.65% {
    padding-left: 10px;
  }
  33.3% {
    padding-left: 5px;
  }
  49.95% {
    padding-left: 8px;
  }
  66.6% {
    padding-left: 3px;
  }
  83.25% {
    padding-left: 5px;
  }
  100% {
    padding-left: 0;
  }
}

---

正如Santi提到的，您可以通过使用“框大小：边框框”修复右侧。

是。使用

padding left

代替

transform

/* Wobble Horizontal */
@-webkit-keyframes login-wobble-horizontal {
  16.65% {
    padding-left: 10px;
  }
  33.3% {
    padding-left: 5px;
  }
  49.95% {
    padding-left: 8px;
  }
  66.6% {
    padding-left: 3px;
  }
  83.25% {
    padding-left: 5px;
  }
  100% {
    padding-left: 0;
  }
}

---

正如Santi所提到的，您可以通过使用“框大小：边框框”来修复右侧问题。

使用CSS

文本缩进

。登录密码错误{
-webkit动画名称：登录摇摆水平；
动画名称：登录摇摆水平；
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画计时功能：轻松输入输出；
动画计时功能：轻松进出；
-webkit动画迭代计数：1；
动画迭代次数：1；
}
/*水平摆动*/
@-webkit登录关键帧水平摆动{
16.65% {
文本缩进：8px；
}
33.3% {
文本缩进：-6px；
}
49.95% {
文本缩进：4px；
}
66.6% {
文本缩进：-2px；
}
83.25% {
文本缩进：1px；
}
100% {
文本缩进：0px；
}
}

---

使用CSS

文本缩进

。登录密码错误{
-webkit动画名称：登录摇摆水平；
动画名称：登录摇摆水平；
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画计时功能：轻松输入输出；
动画计时功能：轻松进出；
-webkit动画迭代计数：1；
动画迭代次数：1；
}
/*水平摆动*/
@-webkit登录关键帧水平摆动{
16.65% {
文本缩进：8px；
}
33.3% {
文本缩进：-6px；
}
49.95% {
文本缩进：4px；
}
66.6% {
文本缩进：-2px；
}
83.25% {
文本缩进：1px；
}
100% {
文本缩进：0px；
}
}

---

不设置文本框位置的动画，而是添加了

框大小：边框框

并设置了其

左侧填充

？无法像使用HTML元素那样设置文本动画。但是，根据您的要求，您可以做某些事情。您可能希望将标题重命名为“为输入或文本框中的值设置动画”，以便将来更多的人可以找到此问题/答案。而不是为文本框的位置设置动画，如果您改为添加了

框大小：边框框

，并设置了其

左侧填充的动画

，该怎么办？您无法像使用HTML元素那样设置文本动画。但是，根据您的要求，您可以做某些事情。您可能希望将标题重命名为“从输入或文本框中设置值动画”，这样将来可能会有更多的人找到此问题/答案。正如我提到的，不需要“补偿”。只需添加

框大小：边框框@Santi-True。好主意。正如我提到的，不需要“赔偿”。只需添加
框大小：边框框@Santi-True。好电话。