Question

我为表单上的标签设置动画，以便在输入字段具有焦点时向上移动并缩小尺寸。

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

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

＆＃13;

.bottomBox {
  background: white;
  margin: 30px auto;
  width: 640px;
  height: 595px;
  border: 1px solid #9c9c9c;
}
.bottomBox h3 {
  text-align: center;
  padding: 20px 0;
}
.freeQuoteForm {
  margin: 0 auto;
  width: 530px;
  height: 430px;
  border: 1px solid #9c9c9c;
  text-align: left;
}
.formFields {
  border-bottom: 1px solid #9c9c9c;
  position: relative;
}
input,
textarea {
  font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 200;
  border: none;
}
.input {
  display: inline-block;
  height: 60px;
  padding: 0px;
  background: transparent;
}
.formLabel {
  position: absolute;
  left: 10px;
  -webkit-user-select: none;
  cursor: pointer;
  color: #bfbfbf;
  font-size: 70%;
  line-height: 8em;
  padding-left: 5px;
  height: 3px;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
#lastName {
  border-left: 1px solid #9c9c9c;
}
#lastName + .formLabel {
  left: 52%;
}
#lastName,
#firstName,
#email {
  padding-left: 12px;
  width: 50%;
  box-sizing: border-box;
}
#email {
  width: 100%;
}
.input:focus {
  outline: none;
  -webkit-animation: fadeColorBlue 2s 0s 1 ease-in-out forwards;
  animation: fadeColorBlue 2s 0s 1 ease-in-out forwards;
}
input:focus + .formLabel {
  -webkit-animation: colorScaleMove 1.5s ease-in-out forwards;
  animation: colorScaleMove 1.5s ease-in-out forwards;
}
.input:valid {
  -webkit-animation: fadeColorWhite 4s ease forwards;
  animation: fadeColorWhite 4s ease forwards;
}
@-webkit-keyframes fadeColorBlue {
  0% {
    background-color: white;
  }
  100% {
    background-color: #e6f9ff;
  }
}
@keyframes fadeColorBlue {
  0% {
    background-color: white;
  }
  100% {
    background-color: #e6f9ff;
  }
}
@-webkit-keyframes fadeColorWhite {
  0% {
    background-color: #e6f9ff;
  }
  100% {
    background-color: white;
  }
}
@keyframes fadeColorWhite {
  0% {
    background-color: #e6f9ff;
  }
  100% {
    background-color: white;
  }
}
@-webkit-keyframes colorScaleMove {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0px);
    transform: scale(1) translateY(0px);
  }
  10% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(0.85) translateY(-34px);
    transform: scale(0.85) translateY(-34px);
    color: black;
  }
}
@keyframes colorScaleMove {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0px);
    transform: scale(1) translateY(0px);
  }
  10% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(0.85) translateY(-34px);
    transform: scale(0.85) translateY(-34px);
    color: black;
  }
}

＆＃13;

<div class="bottomBox">
			<h3>Free Quote Form</h3>
			<form class="freeQuoteForm" autocomplete="off">
				<div class="formFields">
					<input type="text" id="firstName" class="input" required><label class="formLabel" for="firstName">First Name</label><input type="text" id="lastName" class="input" required><label class="formLabel" for="LastName">Last Name</label>
				
				</div>
				<div class="formFields">
					<input type="email" id="email" class="input" required><label class="formLabel" for="email">Email Address</label>
				</div>
			</form>

		</div>

＆＃13;

Answer 1

属性值对animation-fill-mode: forwards用于维持动画 的最后一个关键帧的状态，只要动画本身适用 。当动画不再适用时（或已经删除），它将无法保持状态。

在您的代码段中，动画仅适用于元素，而输入具有焦点，因此当它失去焦点时，元素（标签）会快速回到原始位置。如果您想将标签保留在动画的结束位置，那么您应该使用JavaScript，听取animationend事件，使用transform获取最终getComputedStyle值并将其重新设置为元素通过内联样式，如下面的代码片段。

即使已经从中移除了动画，也没有纯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;
    });
  }
}

<强>演示：

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;
    });
  }
}

.bottomBox {
  background: white;
  margin: 30px auto;
  width: 640px;
  height: 595px;
  border: 1px solid #9c9c9c;
}
.bottomBox h3 {
  text-align: center;
  padding: 20px 0;
}
.freeQuoteForm {
  margin: 0 auto;
  width: 530px;
  height: 430px;
  border: 1px solid #9c9c9c;
  text-align: left;
}
.formFields {
  border-bottom: 1px solid #9c9c9c;
  position: relative;
}
input,
textarea {
  font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 200;
  border: none;
}
.input {
  display: inline-block;
  height: 60px;
  padding: 0px;
  background: transparent;
}
.formLabel {
  position: absolute;
  left: 10px;
  -webkit-user-select: none;
  cursor: pointer;
  color: #bfbfbf;
  font-size: 70%;
  line-height: 8em;
  padding-left: 5px;
  height: 3px;
  transform-origin: center left;
}
#lastName {
  border-left: 1px solid #9c9c9c;
}
#lastName + .formLabel {
  left: 52%;
}
#lastName,
#firstName,
#email {
  padding-left: 12px;
  width: 50%;
  box-sizing: border-box;
}
#email {
  width: 100%;
}
.input:focus {
  outline: none;
  animation: fadeColorBlue 2s 0s 1 ease-in-out forwards;
}
input:focus + .formLabel {
  animation: colorScaleMove 1.5s ease-in-out forwards;
}
.input:valid {
  animation: fadeColorWhite 4s ease forwards;
}
@keyframes fadeColorBlue {
  0% {
    background-color: white;
  }
  100% {
    background-color: #e6f9ff;
  }
}
@keyframes fadeColorWhite {
  0% {
    background-color: #e6f9ff;
  }
  100% {
    background-color: white;
  }
}
@keyframes colorScaleMove {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
  10% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(0.85) translateY(-34px);
    color: black;
  }
}

<div class="bottomBox">
        <h3>Free Quote Form</h3>
        <form class="freeQuoteForm" autocomplete="off">
            <div class="formFields">
                <input type="text" id="firstName" class="input" required><label class="formLabel" for="firstName">First Name</label><input type="text" id="lastName" class="input" required><label class="formLabel" for="LastName">Last Name</label>

            </div>
            <div class="formFields">
                <input type="email" id="email" class="input" required><label class="formLabel" for="email">Email Address</label>
            </div>
        </form>

    </div>

（请注意，如果您需要支持旧浏览器，您可能必须收听animationend事件的浏览器前缀版本。）

如何在动画完成后获取CSS3动画以保持其位置？

1 个答案: