javascript - 是否可以为文本框中的文本设置动画

Question

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

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

我已经创建了一个示例以供引用

.login-wrongPassword {
  -webkit-animation-name: login-wobble-horizontal;
  animation-name: login-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Horizontal */
@-webkit-keyframes login-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

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

可以只为文本而不是文本框本身设置动画。 ??

Answer 1

使用 CSS text-indent

.login-wrongPassword {
  -webkit-animation-name: login-wobble-horizontal;
  animation-name: login-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Horizontal */
@-webkit-keyframes login-wobble-horizontal {
  16.65% {
    text-indent: 8px;
  }
  33.3% {
    text-indent: -6px;
  }
  49.95% {
    text-indent: 4px;
  }
  66.6% {
    text-indent: -2px;
  }
  83.25% {
    text-indent: 1px;
  }
  100% {
    text-indent: 0px;
  }
}

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