CSS 转换生成器

CSS 转换生成器是 CSS 转换属性的可视化编辑器, 您可以选择要动画化的属性, 设置持续时间, 选择定时功能, 并添加延迟, 然后触发实时预览, 观看精确的宽松, 然后再复制声明, 您可以在一个速记中分层几个转换 - 例如在移动变换时褪色不透明度 - 并且每个层都有自己的属性, 持续时间, 定时和延迟。

转换告诉浏览器对属性两个值之间的变化进行动画处理,而不是立即切换。在悬停时更改背景颜色,无需转换,它会突然断裂;添加转换:背景颜色 200ms 易于使用,相同的更改会在五分之一秒内轻松使用。转换基于基本状态,而不是悬停状态,因此元素会对更改进行动画处理,这使得交互感觉完成而不是在返回的路上突然。

Everything happen in your browser。Fade、Button hover 或 Bounce 这样的预设开始,调整滑块并进行选择,按下预览触发器即可看到运动,复制速记。工具按照规范要求的顺序写入四个部分- 属性、持续时间、定时- 功能、延迟- 并在为零时省略延迟。没有帐户,没有上传,一旦页面加载完毕,它就会保持离线工作。

最常见的错误是尝试转换一个没有中间值的属性。显示:无以显示:块无法动画化,因为显示不是可动画属性 - 无与块之间没有中间位置 - 这就是为什么单独构建在显示上的淡入淡出跳跃的修复方法是将不透明度和可见性一起转换,或者使用较新的允许离散行为。它也值得优先于宽度、高度、顶部或左侧进行动画转换和不透明度:前两个在 GPU 上合成,不会触发布局,因此它们保持平滑,而动画布局属性重新计算每个帧上的页面,并且是粗糙、口吃的转换的通常来源。