css元素一直抖动怎么实现_用animation制作震动提示效果


CSS实现抖动效果需定义@keyframes使元素在±4px间高频小幅位移,配合0.4s~0.6s时长、2~4次循环及ease-in-out函数;JS控制class增删防叠加,并适配prefers-reduced-motion。

css元素一直抖动怎么实现_用animation制作震动提示效果

用 CSS animation 实现元素“抖动”或“震动”提示效果,核心是让元素在水平方向(x轴)快速、小幅位移,配合短周期和高重复次数,营造出视觉上的震动感。关键不在“抖”,而在“有控制地晃”——幅度小、频率高、持续时间短,否则容易引起不适。

定义震动动画的关键帧

使用 @keyframes 定义一个左右偏移的循环动画。常见做法是让元素在 -4px 到 +4px 之间来回移动,避免使用过大值(如 ±10px),否则像“弹跳”而非“震动”:

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

这个写法比简单用 0%, 100% 两帧更自然,中间加入多个停顿点能增强节奏感,避免机械感。

应用动画并控制触发行为

给目标元素(比如表单输入框、按钮)添加动画,并设置合理时长与次数。典型配置:

稿定抠图 稿定抠图

AI自动消除图片背景

稿定抠图 80 查看详情 稿定抠图
  • duration:0.4s~0.6s(太短看不出,太长像摇晃)
  • iteration-count:2~4 次(一般用 2infinite 配合 JS 控制停止)
  • timing-function:用 ease-in-outlinear,避免 ease 造成开头结尾拖沓
  • fill-mode:建议加 forwards,确保最后一帧状态保留(可选)
.input-error {
  animation: shake 0.5s ease-in-out 2;
}

配合 J*aScript 精准触发和复位

纯 CSS 动画一旦添加 class 就会执行,但实际场景中常需“验证失败时抖一下,用户修改后停止”。这时要用 JS 控制 class 的增删,并注意避免连续多次触发导致动画叠加:

  • 添加 class 前先移除旧的:el.classList.remove('shake-active')
  • setTimeoutanimationend 事件清理 class,防止样式残留
  • 可加防抖逻辑:比如 1 秒内只触发一次震动
input.addEventListener('blur', () => {
  if (!isValid(input.value)) {
    input.classList.remove('shake-active');
    void input.offsetWidth; // 强制重排,重置动画
    input.classList.add('shake-active');
  }
});

增强可用性的小细节

震动是强视觉反馈,对部分用户可能引发眩晕。建议:

  • 仅用于错误提示等必要场景,非装饰性使用
  • 支持系统减少动画偏好:@media (prefers-reduced-motion: reduce) 中禁用该动画
  • 搭配其他反馈,如红边框、文字提示、图标变化,别只靠震动
@media (prefers-reduced-motion: reduce) {
  .shake-active {
    animation: none;
  }
}

以上就是css元素一直抖动怎么实现_用animation制作震动提示效果的详细内容,更多请关注其它相关文章!


# javascript  # 中文网  # 相关文章  # 可用性  # 而在  # 多个  # 就会  # 时长  # 选择器  # red  # ssl  # js  # java  # css  # 抠图  # 满族人seo  # 网站的建设总结模板图  # 做seo有前景  # 花都区广告推广招聘网站  # 福州短视频seo公司  # 怎样在网站上推广产品呢  # 外贸网站建站和推广费用  # 导游网站如何建设的  # 姑苏区营销型网站建设  # 西宁网站建设前端  # 要用 


相关栏目: 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894


相关推荐: J*aScript包管理器_Npm与Yarn对比  Win11怎么设置分辨率 Win11显示设置调整分辨率及刷新率修改  铁路12306入口 铁路12306官网版入口登录网址  传统曲艺莲花落的表演形式是  word邮件合并怎么插入个性化图片_Word邮件合并插入个性化图片方法  pubmed数据库官方主页_pubmed学术论文查找官网直达  如何查询个人病历记录  LINUX怎么查看显卡信息_LINUX查看GPU状态  汽水音乐车机版官网5.0 汽水音乐车机版5.0版本下载入口  《杖剑传说》食谱大全  《海底捞》点外卖方法  Django模型动态关联检查:高效管理复杂关系  《雷电模拟器》截图方法介绍  怎样设置开机后自动运行某个程序_Windows启动文件夹与任务计划【自动化】  苹果官网国补入口在哪  PHP odbc_fetch_array 返回值处理:如何正确访问嵌套数组元素  Python自动化抓取GBGB赛狗比赛结果:日期范围与赛道筛选教程  CSS如何使用outline-offset与颜色组合突出元素边框  蜻蜓FM如何设置移动流量播放  《淘宝联盟》推广自己的店铺方法  C++ cast类型转换总结_C++ reinterpret_cast与const_cast的使用  知乎APP怎么查看自己被邀请的问题_知乎APP邀请回答记录查看与参与方法  无人机考证官网 中国民航无人机考证官网登录入口  圆通快递官网入口查询单号 手机版官方查询入口  冬季去寒冷地区旅游,以下哪种做法有助于缓解冻伤  动漫之家观看全集库 动漫之家免费资源网地址  《U校园》学生登录入口2025  附近酒吧怎么找?  暴风影音官网正式版_暴风影音手机版官网下载安卓  Animex动漫社社登录官网 Animex动漫社资源社入口直达  《桃源记2》资源采集攻略  在Dash应用中自定义HTML标题和网站图标  J*aScript深度克隆:实现高效、健壮与安全的复杂对象复制  CDR如何复制交互式填充色  漫蛙manwa漫画官网链接_漫蛙manwa最新可用网址推荐  微信步数怎么刷_微信步数快速提升技巧  PHP多语言网站的实现:会话管理与翻译函数优化教程  《大周列国志》皇帝律令功能介绍  mysql中如何配置字符集和排序规则_mysql字符集排序配置  电脑双系统如何安装和卸载 Windows和Linux双系统安装教程【详解】  第五人格PC版怎么避免被封号_第五人格PC版防封号注意事项  睡觉时心跳快是什么原因 夜间心悸如何应对  Win10怎么设置快速启动 Win10开启快速启动设置方法  WooCommerce 新客户订单自动添加管理员备注教程  快递优选如何查优选物流_快递优选专属物流渠道查询与配送时效  mail.qq.com登录入口 QQ邮箱网页版直达  B站怎么开|直播| B站|直播|申请需要什么条件【新手必看】  火狐浏览器如何刷新修复浏览器 火狐浏览器“重置Firefox”功能详解  CSS布局中意外顶部空白的调试与解决:深入理解padding-top  如何发挥新媒体矩阵作用?新媒体矩阵怎么搭建? 

 2025-12-19

了解您产品搜索量及市场趋势,制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求,1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司


运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商,作为谷歌推广与Facebook广告全球合作伙伴,聚焦外贸企业出海痛点,以数字化营销为核心,提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持,打破传统外贸获客壁垒,助力企业高效开拓全球市场,成为中小企业出海的可靠合作伙伴。

 8156699

 13765294890

 8156699@qq.com

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.