跳到内容
🛠️ToolsShed

动画时序生成器

CSS动画时序(cubic-bezier)生成器与可视化曲线预览。

预设

自定义

预览

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

关于此工具

动画计时生成器是网络设计师和开发人员创建流畅、自然感受的动画和过渡的必备工具。它生成三次方贝塞尔计时函数,这控制动画如何随时间推进(从开始到完成)。与使用通用缓动预设不同,此工具允许你可视化和自定义动画加速和减速的确切曲线。

要使用生成器,请在交互式曲线预览上调整控制点,以完全按照需要塑造计时函数。你可以实时看到生成的三次方贝塞尔代码,并将其直接复制到CSS过渡和动画中。无论是设计按钮悬停效果、页面过渡还是加载旋转器的微动画,视觉曲线反馈都会帮助你一开始就获得正确的计时。

常见用途包括为用户界面交互创建缓动效果、确保动画感觉反应灵敏且精致,以及在多个设计工具之间匹配动画计时。理解三次方贝塞尔计时的工作原理将帮助你超越默认的线性或ease-in-out预设,创建与品牌动作语言相符的动画。

常见问题

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.