表单聚焦反馈是提升用户操作体验的重要细节，通过CSS动画可以在用户点击或切换到表单元素时，给出直观的视觉提示，无需额外编写JavaScript逻辑就能实现流畅的交互效果。
基础聚焦动画实现
最常见的表单聚焦反馈是输入框边框颜色变化和轻微缩放效果，通过:focus伪类结合transition属性即可实现。
/* 输入框基础样式 */
.input-item {
width: 300px;
height: 40px;
padding: 0 12px;
border: 2px solid #ddd;
border-radius: 4px;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
/* 聚焦时的动画效果 */
.input-item:focus {
border-color: #409eff;
box-shadow: 0 0 8px rgba(64, 158, 255, 0.2);
transform: scale(1.02);
}
提示文字动效实现
很多表单会在输入框内放置提示文字，聚焦时让提示文字上移并缩小，能提升表单的整洁度，这种效果可以通过label标签配合transform和opacity属性实现。
<div class="form-group"> <input type="text" id="username" class="input-with-label" required> <label for="username" class="input-label">用户名</label> </div>
.form-group {
position: relative;
margin: 20px 0;
}
.input-with-label {
width: 300px;
height: 40px;
padding: 12px 12px 0;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
transition: border-color 0.3s ease;
}
.input-label {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 14px;
pointer-events: none;
transition: all 0.3s ease;
}
/* 输入框聚焦或内容不为空时，标签上移缩小 */
.input-with-label:focus + .input-label,
.input-with-label:not(:placeholder-shown) + .input-label {
top: 8px;
transform: translateY(0);
font-size: 12px;
color: #409eff;
}
复选框与单选框聚焦动效
除了输入框，复选框和单选框也可以添加聚焦动画，让用户清楚知道当前选中的元素，避免误操作。
/* 自定义复选框样式 */
.checkbox-item {
width: 18px;
height: 18px;
border: 2px solid #ddd;
border-radius: 3px;
outline: none;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
/* 聚焦时的脉冲动画 */
.checkbox-item:focus {
animation: pulse 1s ease infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4);
}
70% {
box-shadow: 0 0 0 6px rgba(64, 158, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
}
}
/* 选中状态样式 */
.checkbox-item:checked {
border-color: #409eff;
background-color: #409eff;
}
动画性能优化建议
使用CSS动画时需要注意性能问题，避免影响页面流畅度，以下是几个优化要点：
- 优先使用
transform和opacity属性实现动画，这两个属性不会触发重排重绘，性能更好 - 动画时长控制在0.2s到0.4s之间，过短用户感知不明显，过长会显得拖沓
- 避免给
width、height、margin等属性添加动画，这些属性会触发重排，影响性能 - 如果动画需要循环播放，比如聚焦时的脉冲效果，要设置合理的循环次数，避免无限制循环消耗资源
常见问题解答
为什么聚焦动画在移动端不生效
部分移动端浏览器默认会隐藏表单元素的聚焦样式，需要给元素添加outline: none后自定义聚焦效果，同时避免设置-webkit-tap-highlight-color为透明，否则会覆盖自定义的聚焦动画。
如何让动画只在用户交互时触发
可以通过:focus-visible伪类替代:focus，这个伪类只会在用户通过键盘、点击等交互操作触发聚焦时生效，通过脚本触发的聚焦不会触发该样式，避免不必要的动画。
/* 只在用户交互聚焦时触发动画 */
.input-item:focus-visible {
border-color: #409eff;
box-shadow: 0 0 8px rgba(64, 158, 255, 0.2);
}