Loading...
Loading...
构建带属性、时长、延迟与缓动(含现成 cubic-bezier 曲线)的 CSS 过渡,实时预览并复制 CSS
靠手感把 CSS 过渡调对,而不是反复试错。选择要动画的属性,设定时长和延迟,挑一个缓动函数,含 bounce、snappy、back 等现成 cubic-bezier 曲线。点播放来回切换方块,看缓动的实际运动,再复制一行 transition 用到样式表。
预览动画的正是你选的属性,所见即规则所为。纯 CSS、无依赖,全部在浏览器里运行。
切换预览,看你设定的时长与曲线产生的精确运动。
关键字缓动外加 bounce、snappy、smooth、back 等 cubic-bezier 预设。
选 transform、opacity、颜色、宽度或 box-shadow,演示就动哪个。
复制含时长、缓动与延迟的整洁 transition 简写。
选择要过渡的属性。
设定时长和延迟,挑一个缓动函数。
点播放切换方块,观察缓动。
把 transition CSS 复制进样式表。
在元素被悬停或聚焦时加上平滑的淡入或位移。
为按钮、开关和菜单调出有生气的弹跳或回弹手感。
并排比较缓动,找到最贴合你运动的那一条。
把所选属性、时长、缓动与延迟拼成 transition 简写,应用到一个在播放时切换状态的预览元素,从而实时呈现缓动。
生成器全程在浏览器运行,你的设置不上传。
过渡是原生 CSS,预览流畅、无网络请求。