Javascript 如何让CSS3动画在动画完成后保持其位置？

我对表单上的标签设置动画，以便当输入字段具有焦点时，标签向上移动并缩小大小

我使用“向前填充”模式，该模式应保持最终关键帧状态

然而，情况似乎并非如此。输入字段失去焦点后，标签向下跳转。如何确保即使在场失去焦点后，标签仍保持在动画结束时的位置

.bottomBox{
背景：白色；
保证金：30像素自动；
宽度：640px；
身高：595px；
边框：1px实心#9c9c；
}
.底盒h3{
文本对齐：居中；
填充：20px0；
}
.freeQuoteForm{
保证金：0自动；
宽度：530px；
高度：430px；
边框：1px实心#9c9c；
文本对齐：左对齐；
}
formFields先生{
边框底部：1px实心#9c9c；
位置：相对位置；
}
输入，
文本区{
字体系列：“Sinkin Sans”、Verdana、Helvetica、Sans serif；
字体大小：12px；
字号：200；
边界：无；
}
.输入{
显示：内联块；
高度：60px；
填充：0px；
背景：透明；
}
.formLabel{
位置：绝对位置；
左：10px；
-webkit用户选择：无；
光标：指针；
颜色：#bfbf；
字体大小：70%；
线高：8em；
左侧填充：5px；
高度：3倍；
-webkit变换原点：左中；
变换原点：左中；
}
#姓氏{
左边框：1px实心#9c9c；
}
#lastName+.formLabel{
左：52%；
}
#姓，
#名字，
#电子邮件{
左侧填充：12px；
宽度：50%；
框大小：边框框；
}
#电子邮件{
宽度：100%；
}
.输入：焦点{
大纲：无；
-webkit动画：fadeColorBlue 2s 0s 1缓进缓出向前；
动画：fadeColorBlue 2s 0s 1缓进缓出向前；
}
输入：focus+.formLabel{
-webkit动画：colorScaleMove 1.5s快进快出向前；
动画：colorScaleMove 1.5s快进快退向前；
}
.输入：有效{
-webkit动画：fadeColorWhite 4s轻松前进；
动画：fadeColorWhite 4s轻松前进；
}
@-webkit关键帧fadeColorBlue{
0% {
背景色：白色；
}
100% {
背景色：#e6f9ff；
}
}
@关键帧淡色蓝{
0% {
背景色：白色；
}
100% {
背景色：#e6f9ff；
}
}
@-webkit关键帧fadeColorWhite{
0% {
背景色：#e6f9ff；
}
100% {
背景色：白色；
}
}
@关键帧淡色白色{
0% {
背景色：#e6f9ff；
}
100% {
背景色：白色；
}
}
@-webkit关键帧colorScaleMove{
0% {
不透明度：1；
-webkit转换：缩放（1）translateY（0px）；
变换：缩放（1）平移（0px）；
}
10% {
不透明度：0；
}
40% {
不透明度：0；
}
100% {
不透明度：1；
-webkit变换：比例（0.85）translateY（-34px）；
变换：比例（0.85）translateY（-34px）；
颜色：黑色；
}
}
@关键帧colorScaleMove{
0% {
不透明度：1；
-webkit转换：缩放（1）translateY（0px）；
变换：缩放（1）平移（0px）；
}
10% {
不透明度：0；
}
40% {
不透明度：0；
}
100% {
不透明度：1；
-webkit变换：比例（0.85）translateY（-34px）；
变换：比例（0.85）translateY（-34px）；
颜色：黑色；
}
}

免费报价表
姓
电子邮件地址

属性值对

动画填充模式：前进

仅在动画本身适用时才用于保持动画最后一个关键帧的状态。当动画不再适用（或已被删除）时，它将不会保持该状态

在代码段中，动画仅在输入具有焦点时适用于元素，因此当其失去焦点时，元素（标签）将捕捉回其原始位置。如果希望将标签保持在动画的结束位置，则应使用JavaScript，监听事件，使用

getComputedStyle

获取最终的

transform

值，并通过内联样式将其设置回元素，如下面的代码段所示

即使在从元素中删除动画后，也没有纯CSS方法使元素保留其动画结束位置

JS代码：

window.onload = function() {
  var els = document.querySelectorAll('.formLabel');
  for (i = 0; i < els.length; i++) {
    els[i].addEventListener('animationend', function() {
      var currTransform = window.getComputedStyle(this).transform;
      this.style.transform = currTransform;
    });
  }
}

免费报价表
姓
电子邮件地址

感谢Harry帮助我理解为什么动画没有停留在最终位置，也感谢您对如何修复此问题提出的出色建议。