如何启用多行文本表单字段颤动

在表单设计中，有时需要使用多行文本框，用户输入完毕之后，我们需要对该表单字段进行验证，通常情况下在用户输入错误的时候，我们会进行红色提示，这时候，我们可以加入动画效果来增强用户的体验感。

实现方式

我们可以通过CSS3中的animation属性来实现表单字段的颤动效果，核心代码如下：

textarea:focus{
    animation: shake .3s ease-in-out;
}

@keyframes shake{
    0%, 100%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(-5px);
    }
    75%{
        transform: translateX(5px);
    }
}

代码解释

1. 该动画是在多行文本框获得焦点的时候启动。
2. 定义一个名为shake的动画，在0%到100%的时候，transform: translateX(0)代表不进行移动，25%的时候transform: translateX(-5px)代表向左移动5px，75%的时候transform: translateX(5px)代表向右移动5px，最后回到原位。
3. 在textarea:focus的时候加入动画shake，时间为0.3秒，速度为ease-in-out。

可以扩展的效果

• 当表单内容非法时，我们可以添加红色边框，来增强可视效果。
• 当表单内容合法时，我们可以添加绿色边框，来增强可视效果。

总结

启用多行文本表单字段颤动，可以提升用户的体验感，增强可视效果，提高表单的可用性，让用户在填写多行文本时更加流畅自如。