CSS Form焦点输入标签即使无效也可以保持动画位置

Question

我想知道是否有任何形式可以保留表单输入类型emai的标签的动画状态，即使仅对CSS无效也是如此。 如您所见，这仅适用于具有某些有效输入内容的普通输入文本，如果我没有输入电子邮件地址，则表单焦点将恢复为原始状态。我尝试input[type='email']{ &:focus ~ label,&:invalid:not(:empty) ~ label{无济于事？

label {
    position: absolute;
    pointer-events: none;
    left: 30px;
    top: 12px;
    transition: all $transition;
    font-size: $font-size-base* 0.75;
    .form-dark & {
        color: $greyLighter;
    }
}
.form-control {
&:focus ~ label,
&:valid ~ label {
    top: -8px;
    font-size: $font-size-base* 0.6;
    padding: 0 0.25rem;
    background-color: $backgroundLight;
    .form-dark & {
        color: $white;
        background-color: $backgroundDark;
    }
  }
}

<div class="form-group col-md-12">
            <input type="email" name="user_email" id="email" required="" class="form-control" placeholder="">
            <label for="email" id="email_language">Email Address</label>
</div>

谢谢！