应用css动画后，输入字段的值未正确定位

Question

编辑 - 我在Mac和iPad上使用safari进行测试

我有以下代码，它由一个样式化的输入字段组成。

输入字段以CSS动画效果跳转到屏幕上。好的，这很好用。

1. 但是当我尝试使用javascript（震动 - 模仿输入中的错误）应用另一个动画效果时，value属性移动到输入字段的底部，在文本和底部边框之间留下很少的填充。我不确定为什么会这样。



效果本身效果很好，但定位都不正确。请查看并运行代码段。任何帮助将非常感谢

我用来添加震动效果的JS是：

$('#EmailInput').removeClass('animated-second bounceInUp').addClass('animated shake').addClass('error-msg');

＆＃13;
＆＃13;
input[type="email"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="email"] {
  height: 42px;
  padding: 8px 12px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 2px solid #bdc3c7;
  border-radius: 0px;
  box-shadow: none;
  box-sizing: border-box;
}
input {
  line-height: normal;
}
#EmailInput,
#EmailInput:focus {
  display: block;
  margin: 0;
  padding: 0 0 0.15em;
  width: 100%;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  background-color: transparent;
  color: black;
  text-overflow: ellipsis;
  font-weight: bold;
  font-size: 2.5em;
  border-radius: 0;
  text-align: center;
  height: 3em;
  font-family: Arial, sans-serif;
  text-transform: lowercase;
}
/*For the bounce*/

.animated-third {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated-second {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated-first {
  -webkit-animation-duration: 0.65s;
  animation-duration: 0.65s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<br><br>
<div style="margin: 20px auto; width: 70%">
  <input class="animated-third bounceInUp" name="email" type="email" placeholder="your@email.com" id="EmailInput" value="haha@hah.com">
</div>
＆＃13;
＆＃13;
＆＃13;