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">

Answer 2

是。使用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;
  }
}

JSFiddle

正如桑蒂所提到的，你可以通过使用'box-sizing：border-box'来修复右侧

是否可以为文本框内的文本设置动画

2 个答案: