个人常用的css动画总结

发布时间：2026/8/9 19:13:50

个人常用的css动画总结
目录定义动画中心360°旋转闪烁透明度荧光灯闪烁1荧光灯闪烁2呼吸灯放大缩小弧线出现页面上移100%上下反复移动左右就用translateX由左向右移动左箭头动画由右向左移动右箭头动画从上面旋转掉下来由小变大盲盒抽出效果摇晃以下边中间为中心由小变大再淡出烟花boom弹窗由小变大出现定义动画中心.anim_center { transform-origin: 50% 50%;/*定义动画的旋转中心点*/ -ms-transform-origin: 50% 50%;/* IE 9 */ -webkit-transform-origin: 50% 50%;/* Safari 和 Chrome */ -moz-transform-origin: 50% 50%;/* Firefox */ -o-transform-origin: 50% 50%;/* Opera */ }360°旋转.rotate_anim{-webkit-animation:rotate_anim 2s linear infinite;animation:rotate_anim 2s linear infinite;}-webkit-keyframesrotate_anim{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}keyframesrotate_anim{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}闪烁透明度.shine{animation:shine 1s linear infinite alternate;-webkit-animation:shine 1s linear infinite alternate;/*Safari and Chrome*/}keyframesshine{from{opacity:1;}to{opacity:0.3;}}-webkit-keyframesshine{from{opacity:1;}to{opacity:0.3;}}荧光灯闪烁1.shine_fast{animation:shine_fast 1.4s infinite;-webkit-animation:shine_fast 1.4s infinite;/*Safari and Chrome*/}keyframesshine_fast{0%, 49%, 100%{opacity:1;}50%, 99%{opacity:0;}}-webkit-keyframesshine_fast{0%, 49%, 100%{opacity:1;}50%, 99%{opacity:0;}}荧光灯闪烁2.light_shine{-webkit-animation:light_shine 2s infinite;animation:light_shine 2s infinite;}-webkit-keyframeslight_shine{0%, 34%, 45%, 100%{opacity:1;}20%, 40%, 50%{opacity:0;}}keyframeslight_shine{0%, 34%, 45%, 100%{opacity:1;}20%, 40%, 50%{opacity:0;}}呼吸灯放大缩小.breath{animation:breathe 2s infinite;-webkit-animation:breathe 2s infinite;/* Safari and Chrome */}keyframesbreathe{0%,100%{transform:scale(0.9,0.9);}50%{transform:scale(1.2,1.2);}}-webkit-keyframes breathe/* Safari and Chrome */{0%,100%{-webkit-transform:scale(0.9,0.9);}50%{-webkit-transform:scale(1.2,1.2);}}弧线出现旋转着由小变大画弧线出来关键在于横纵两个动画一快一慢(里面的数值根据需要调整).curve_anim{animation:curve_anim 1.5s ease-in,curve_anim1 1.5s ease-out;}keyframescurve_anim{0%{left:500px;transform:scale(0,0)rotate(-160deg);}70%{left:232px;transform:scale(0.4,0.4)rotate(-28deg);}100%{left:40px;transform:scale(1,1)rotate(20deg);}}-webkit-keyframescurve_anim{0%{left:500px;-webkit-transform:scale(0,0)rotate(-160deg);}70%{left:232px;-webkit-transform:scale(0.4,0.4)rotate(-28deg);}100%{left:40px;-webkit-transform:scale(1,1)rotate(20deg);}}keyframescurve_anim1{0%{top:600px;}70%{top:100px;}100%{top:291.5px;}}-webkit-keyframescurve_anim1{0%{top:600px;}70%{top:100px;}100%{top:291.5px;}}页面上移100%.move_top{-webkit-animation:hide_top 2s ease-out both;animation:hide_top 2s ease-out both;}-webkit-keyframeshide_top{0%{-webkit-transform:translateY(0);}100%{-webkit-transform:translateY(-100%);}}keyframeshide_top{0%{transform:translateY(0);}100%{transform:translateY(-100%);}}上下反复移动左右就用translateX.topToDown{animation:topToDown 1s linear infinite alternate;-webkit-animation:topToDown 1s linear infinite alternate;}-webkit-keyframestopToDown{from{-webkit-transform:translateY(0px);}to{-webkit-transform:translateY(50px);}}keyframestopToDown{from{transform:translateY(0px);}to{transform:translateY(50px);}}由左向右移动左箭头动画.left_to_right{animation:left_to_right 2s linear infinite alternate;-webkit-animation:left_to_right 2s linear infinite alternate;}keyframesleft_to_right{from{transform:translateX(-20px);}to{transform:translateX(0);}}-webkit-keyframesleft_to_right{from{transform:translateX(-20px);}to{transform:translateX(0);}}由右向左移动右箭头动画.right_to_left{animation:right_to_left 1s linear infinite alternate;-webkit-animation:right_to_left 1s linear infinite alternate;}keyframesright_to_left{from{transform:translateX(0);}to{transform:translateX(20px);}}-webkit-keyframesright_to_left{from{transform:translateX(0);}to{transform:translateX(20px);}}从上面旋转掉下来由小变大盲盒抽出效果.blindBox_drop_anim{animation:blindBox_drop_anim 0.6s ease-in;-webkit-animation:blindBox_drop_anim 0.6s ease-in;}keyframesblindBox_drop_anim{0%{transform:translateY(-80px)rotate(720deg)scale(.2);}100%{transform:translateY(0)rotate(0deg)scale(1);}}-webkit-keyframesblindBox_drop_anim{0%{transform:translateY(-80px)rotate(720deg)scale(.2);}100%{transform:translateY(0)rotate(0deg)scale(1);}}摇晃以下边中间为中心.rotateSelf{animation:rotateSelf 6s infinite alternate;-webkit-animation:rotateSelf 6s infinite alternate;transform-origin:center bottom;-webkit-transform-origin:center bottom;}keyframesrotateSelf{0%, 50%, 100%{transform:rotate(-8deg);}25%, 75%{transform:rotate(8deg);}}-webkit-keyframesrotateSelf{0%, 50%, 100%{-webkit-transform:rotate(-8deg);}50%, 75%{-webkit-transform:rotate(8deg);}}由小变大再淡出烟花boom.animBoom2{animation:animBoom 1.5s infinite;-webkit-animation:animBoom 1.5s infinite;}keyframesanimBoom{0%{transform:scale(0);opacity:1;}80%{transform:scale(1);}100%{opacity:0;}}-webkit-keyframesanimBoom{0%{-webkit-transform:scale(0);opacity:1;}80%{transform:scale(1);}100%{opacity:0;}}弹窗由小变大出现.dialogOpen1 { -webkit-animation: dialogOpen1 1s linear; animation: dialogOpen1 1s linear; } keyframes dialogOpen1 { 0% { opacity: 0.2; transform: scale3d(0.2,0.2,1); } 25%{ transform: scale3d(0.5,0.5,1); } 50%{ transform: scale3d(0.8,0.8,1); } 75%{ transform: scale3d(1.1,1.1,1); } 100% { transform: scale3d(1,1,1); opacity: 1 } }

相关新闻

Unity艺术字生成器：基于TMP与uGUI的动态Mesh效果实现

Unity艺术字生成器：基于TMP与uGUI的动态Mesh效果实现

1. 项目概述：为什么我们需要一个艺术字生成器？ 在Unity项目里，UI文字处理是个高频需求，无论是游戏里的伤害数字、UI界面的标题，还是运营活动的特殊文案，都离不开对文字的个性化渲染。Unity自带的uGUI Text组…

2026/8/9 19:33:10 阅读更多 →
深度解析：如何在Linux系统高效安装Realtek RTL8821CU无线网卡驱动

深度解析：如何在Linux系统高效安装Realtek RTL8821CU无线网卡驱动

深度解析：如何在Linux系统高效安装Realtek RTL8821CU无线网卡驱动 【免费下载链接】rtl8821CU Realtek RTL8811CU/RTL8821CU USB Wi-Fi adapter driver for Linux 项目地址: https://gitcode.com/gh_mirrors/rt/rtl8821CU 你是否在Linux系统中遇到了Realtek …

2026/8/9 18:54:49 阅读更多 →
如何快速安装安卓应用：APK Installer的完整使用指南

如何快速安装安卓应用：APK Installer的完整使用指南

如何快速安装安卓应用：APK Installer的完整使用指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经想在Windows电脑上安装安卓应用，…

2026/8/8 17:27:15 阅读更多 →

最新新闻

AI Agent上下文管理：四大核心策略与分层架构实战

AI Agent上下文管理：四大核心策略与分层架构实战

1. 从“失忆”说起：为什么你的AI Agent总是记不住事？最近在折腾AI Agent项目时，你是不是也遇到过这种让人抓狂的场景：你让Agent帮你分析一份长文档，它前半部分分析得头头是道，但当你基于前半部分的分析&…

2026/8/9 20:12:15 阅读更多 →
SpringBoot+Vue实习管理系统全栈开发实战

SpringBoot+Vue实习管理系统全栈开发实战

1. 项目概述：实习管理系统全栈解决方案最近在整理过往项目时，翻出了这个基于SpringBootVueMySQL的实习管理系统完整源码。这套系统是我在指导大学生毕业设计时开发的参考案例，包含了从需求分析到部署上线的完整实现过程。系统采用主流的前后端…

2026/8/9 20:12:15 阅读更多 →
Fusion开发常见问题解答：新手到专家的进阶之路

Fusion开发常见问题解答：新手到专家的进阶之路

Fusion开发常见问题解答：新手到专家的进阶之路 【免费下载链接】fusion Unite your modern frontend with your Laravel backend. 项目地址: https://gitcode.com/gh_mirrors/fusion27/fusion Fusion作为一款能够将现代前端与Laravel后端无缝整合的开发框架&…

2026/8/9 20:12:15 阅读更多 →
dosemu2未来路线图：即将到来的新功能与社区贡献指南

dosemu2未来路线图：即将到来的新功能与社区贡献指南

dosemu2未来路线图：即将到来的新功能与社区贡献指南 【免费下载链接】dosemu2 Run DOS programs under linux: 项目地址: https://gitcode.com/gh_mirrors/do/dosemu2 dosemu2是一款在Linux系统下运行DOS程序的开源工具，为用户提供了在现代操作系…

2026/8/9 20:12:15 阅读更多 →
如何快速搭建个人跑步主页：终极完整指南

如何快速搭建个人跑步主页：终极完整指南

如何快速搭建个人跑步主页：终极完整指南 【免费下载链接】running_page Make your own running home page 项目地址: https://gitcode.com/gh_mirrors/ru/running_page 想要打造一个既专业又美观的个人跑步主页吗？running_page项目让你轻松实现这…

2026/8/9 20:12:15 阅读更多 →
Flutter 两个反直觉布局坑：ListTile 水波纹 / VerticalDivider 踩坑实录

Flutter 两个反直觉布局坑：ListTile 水波纹 / VerticalDivider 踩坑实录

Flutter 两个反直觉布局坑：ListTile 水波纹 / VerticalDivider 踩坑实录 各位看官好。说实话，Flutter 里最让我难受的不是报错，是不报错。 报错好办，复制粘贴一搜，十有八九能找到答案。最气人的是那种"代码看着…

2026/8/9 20:11:15 阅读更多 →

日新闻

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁 【免费下载链接】baidupankey 在线查询网盘提取码（维护中 rm repo） 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾经在深夜寻找一份重要资料&#x…

2026/8/9 0:01:47 阅读更多 →
如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南 【免费下载链接】chinese_license_plate_generator 中国车牌生成器 项目地址: https://gitcode.com/gh_mirrors/ch/chinese_license_plate_generator 中国车牌生成器是一个基于Python的开源项目&#xff0c…

2026/8/9 0:01:47 阅读更多 →
收藏！小白程序员轻松入门大模型，从Harness工程开始实践

收藏！小白程序员轻松入门大模型，从Harness工程开始实践

文章强调学习大模型不应只关注模型本身，而应重视模型外的系统搭建，即Harness。提出AgentModelHarness的实用公式，详细介绍Harness的四个层次：持久化层、执行层、控制层和观察与验证层。文章还探讨了上下文工程、工具设计、AGENTS.…

2026/8/9 0:03:48 阅读更多 →

周新闻

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁

5分钟告别提取码焦虑：baidupankey如何智能破解百度网盘资源锁 【免费下载链接】baidupankey 在线查询网盘提取码（维护中 rm repo） 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否曾经在深夜寻找一份重要资料&#x…

2026/8/9 0:01:47 阅读更多 →
如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南

如何快速生成中国车牌图片：Python开源工具完整指南 【免费下载链接】chinese_license_plate_generator 中国车牌生成器 项目地址: https://gitcode.com/gh_mirrors/ch/chinese_license_plate_generator 中国车牌生成器是一个基于Python的开源项目&#xff0c…

2026/8/9 0:01:47 阅读更多 →
收藏！小白程序员轻松入门大模型，从Harness工程开始实践

收藏！小白程序员轻松入门大模型，从Harness工程开始实践

文章强调学习大模型不应只关注模型本身，而应重视模型外的系统搭建，即Harness。提出AgentModelHarness的实用公式，详细介绍Harness的四个层次：持久化层、执行层、控制层和观察与验证层。文章还探讨了上下文工程、工具设计、AGENTS.…

2026/8/9 0:03:48 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/9 17:05:02 阅读更多 →
终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗？ncmdump解密工具帮你轻松解决这个困…

2026/8/9 0:45:04 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片：为英语学习 App 打造桌面级学习助手适用平台：HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0（API 26 Beta）新增了 AgentCard 智能体卡片能力，这是继 HMAF（鸿蒙智能体框架&#x…

2026/8/9 17:05:02 阅读更多 →