感觉便宜的界面和感觉被考虑的界面之间的区别通常是五分之一秒。当指针接触到它时,一个按钮会突然恢复到其悬停颜色,读数为突然;同一按钮在两百毫秒内轻松恢复到该颜色读数为完成。这种宽松是 CSS 转换,对于如此小的事情,我经常看到它做错了,将其置于悬停状态而不是基本状态,通过十几次刷新进行反复调整,或者应用于根本无法动画化的属性。
A transition是浏览器's方式动画一个属性两个值随时间的变化,而不是瞬间切换,它是悬停效果,焦点状态,扩展面板和切换类背后的主力,几乎总是任何人在项目中添加的第一点运动,但速记将四个值按固定顺序塞进一行,计时功能是决定运动感觉的部分,并且有一个著名的悬崖人试图从中淡化某些东西时会掉下来 display: none。在可以看到它播放的地方构建过渡可以保存所有这些。
的 CSS 转换生成器 让您选择属性,以毫秒为单位设置持续时间和延迟,并从 CSS 关键字和一组策划的三次贝塞尔曲线中选择计时功能。您可以将多个转换堆叠成一个速记,触发按钮在实时预览元素上播放运动,以便在提交之前感受到宽松的确切声明位于下面的复印盒中。
TL;博士: CSS 转换在设定的持续时间内动画化一个属性两个值之间的变化,它属于基态,而不是悬停状态,所以元素在两个方向上都容易,速记顺序是属性、持续时间、定时-功能、延迟,你不能转换
display的,因为它没有中间值,你应该更喜欢动画transform並opacity为了流畅的性能。该生成器通过实时悬停预览曝光每个部分,支持多层,并发出干净的 CSS。它完全在您的浏览器中运行,无需注册。
CSS过渡生成器解决了什么问题?
过渡的难点不是语法;而是语法。这是你无法通过阅读来判断运动。 transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) describes一个特定的弹跳轻松,但唯一的方法,知道这种弹跳是否感觉适合你的按钮是看着它发生。并且看着它发生在你自己的项目意味着写规则,设置悬停状态,保存,移动鼠标在元素上,然后调整一个数字,再做一次。那个循环足够慢,大多数人满足于第一个有效的东西,而不是感觉最好的东西。
A生成器将那个循环变成单击,你设置一个持续时间并按下触发器,预览元素在你面前播放过渡,改变计时功能再按一次,你立即感受到线性幻灯片和轻松结算的区别,几轮之后你就形成了感觉两百毫秒的感觉与五百,这是将有助于运动的直觉与妨碍运动的直觉分离,当你满意时,工作中的CSS已经写好了,所以没有什么可以转录的。
与任何可视化 CSS 构建器一样,这里也适用相同的可靠性论证:您不能生成格式错误的 transition value 通过拖动滑块和从菜单中选择,所以输出总是可以安全粘贴的,这就是我保持这种工具关闭的原因,同样的本能背后伸手去做 CSS变换生成器 当我需要转变而不是在脑海中数度时。
在基本状态或悬停状态下,转换将走向何方?
这是我最常看到的错误,而且很值得说清楚,因为修复太简单了,过渡属于元素's基态,而不是属于它的 :hover rule。base 状态上声明转换时,浏览器会向两个方向动画化属性:当指针到达时,它会轻松进入悬停更改,当指针离开时,它会轻松返回。这种对称性使交互感觉完整。
只穿上过渡 :hover 然后你会得到一个不平衡的效果。属性在进入的过程中平稳地动画化,因为元素被盘旋时过渡就存在,但指针离开的那一刻, :hover rule 不再适用,过渡随之而来,属性瞬间回扣,结果是一个优雅地缓和上去然后又往下抽的按钮,看起来比没有动画还差一点,生成器's 输出写入去基态,引导正是因为这个原因被烤进工具中,申报一次,在元素本身上,让状态变化触发。
过渡速记的正确顺序是什么?
的 transition shorthand最多将四个值打包成一行,顺序由规范固定:属性、持续时间、定时功能、延迟。所以 transition: opacity 300ms ease-in-out 100ms 指不透明度属性,动画超过三百毫秒,使用轻松进出的曲线,在一百毫秒的延迟后。获取错误的订单,浏览器要么忽略声明,要么将其读为您无意的内容。
抓人的一条规则是两个时间值,持续时间和延迟都是时间,而CSS纯粹按位置来区分:第一个时间值总是持续时间,第二个总是延迟,如果只写一个时间值,则读作持续时间,延迟保持在默认的零,这就是为什么似乎开始得太早的转换往往是误写为先的延迟的情况,生成器通过按照正确的顺序为你构建速记来回避整个问题,并且在为零时完全省略延迟,因此你永远不会发出尾随 0ms 那什么也不做。这是表格中的解剖结构。
| 部分 | 例子 | 它控制什么 |
|---|---|---|
| 财产 | opacity |
哪些属性会产生动画效果,或者 all 对于每一个可动画的 |
| 持续时间 | 300ms |
动画需要多长时间;第一个时间值 |
| 计时功能 | ease-in-out |
运动的加速度曲线 |
| 延迟 | 100ms |
开始前需要等待多长时间;第二个时间值 |
为什么我的显示:没有过渡不会动画?
Zhe就是悬崖,几乎每个人都至少走过一次,你要Yi个元素淡入,所以你过渡 display 从 none 到 block 并设置 opacity的, 而元素只是出现而没有褪色, 原因根本: display 不是一个可动画的财产。之间没有中间点 none 並 block、浏览器在百分之五十的标记处无法插值到,因此没有什么可以tween的,更改会立即发生,并且您在顶部分层的任何不透明动画都会被切断,因为元素一开始就没有渲染。
经典的修复是动画 opacity 並 visibility 一起离开 display 出它。 visibility can transition,因为,虽然它也是一个离散属性,但将其与持续时间配对可以让浏览器保持元素可见,直到出路时不透明度淡入淡出完成,现代修复是 transition-behavior: allow-discrete是一种较新的功能,可让您为离散属性设置动画,例如 display 在过渡的终点,所以你真的可以淡出 display: none support it 的浏览器中。无论哪种方式, 教训都是一样的:检查你正在转换的属性是否有中间值, 然后你花一个小时想知道为什么没有什么东西移动。这是一种 gotcha, 实时预览在几秒钟内浮出水面, 这是构建运动的一大部分论据, 你可以观看它。
什么是计时函数?为什么它如此重要?
时序函数是过渡的一部分,决定运动的感觉,它做的工作远远多于持续时间,两个相同长度的过渡根据其曲线可以感觉完全不同 A. linear transition匀速移动,感觉机械,就像机器零件一样。an ease-out transition 开始速度快,到达时会变慢,这感觉很自然,因为它模仿了物理对象减速的方式,而且它是大多数界面运动的正确默认值。 ease-in 做相反的事情,并且最适合离开屏幕的事情。
下面,所有这些都是三次贝塞尔曲线。关键词 ease、 ease-in、 ease-out 並 ease-in-out 只是特定名称的友好名称 cubic-bezier(x1, y1, x2, y2) values,其中两个控制点塑造加速度,使立方贝兹更强大的地方在于一个控制点,其a y 值(高于一或低于零)会将动画推过其端点并返回,这就是构建超调或反弹的方式生成器包括用于干净界面运动的材料标准曲线和用于超调以获得弹簧、俏皮感觉的返回曲线,再加上一个 steps() function for motion that jump in discrete frames rather than gliding, which is you animate a sprite or a ticking counter。choosing a curve and pressing trigger is the fastly way to build a feel for what each one does。
我什么时候应该使用多个过渡层?
单个过渡会使一个属性产生动画效果,但真实的交互通常会同时改变几个。悬停时升起的按钮可能会改变其背景颜色,推动其变换并加深其阴影,并且每个按钮都可能想要自己的时机 transition property 用逗号分隔的列表来处理,其中每个条目都是具有自己的属性、持续时间、定时功能和延迟的完整转换。
生成器直接支持这一点:为每个属性添加一个图层,独立调整每个属性,然后工具将它们连接成一个速记 transition: background-color 200ms ease, transform 200ms ease-out.给属性单独过渡而不是使用的原因 all 是控制和性能。 transition: all 方便,但它会为每个更改的属性(包括您不打算更改的属性)设置动画,并且它会迫使浏览器查看所有更改。命名特定属性既更可预测又更便宜。工具中的"慢速显示"预设显示两层过渡、褪色不透明以及共享延迟一起移动变换,这是轻松进入视图的元素的标准配方。如果该配对的变换侧是您正在调整的,则 CSS变换生成器 是伴随工具,两者几乎总是一起使用。
为了获得平滑的性能,我应该使用哪些属性进行动画处理?
并非所有属性都同样便宜,而且这种选择对您的转换是每秒以流畅的六十帧运行还是卡顿运行有直接影响。最喜欢的两个属性是 transform 並 opacity。两者都可以交给 GPU 并合成,而无需重新计算页面布局,因此即使在适度的硬件上,动画也能保持流畅,这就是为什么卡片会滑入 transform: translateX 当同一张卡片动画化时,感觉黄油味 left 感觉很粗糙。
避免动画化的属性是触发布局的属性: width、 height、 top、 left、 margin 並 padding。改变这些中的任何一个都迫使浏览器重新计算元素的位置和大小以及受其影响的一切,在动画的每一帧上,这很昂贵,也是最常见的janky运动的原因,如果你发现自己想要动画一个宽度,通常值得问是否a transform: scaleX would更便宜地产生类似的效果,生成器让你选择任何属性,这样你就不会被阻止,但是它列出的属性放了 transform 並 opacity 靠近顶部,因为这些是您应该首先触及的。构建一组经过深思熟虑的工具的更广泛案例是在 web开发人员工具包 piece,而背后的工作流程习惯则在 开发人员生产力工具 指南。
生成器如何保持预览的诚实?
每个可视化构建器都面临着相同的风险:预览和导出的代码会分散,直到工具教您一个不会重现的值。该生成器应用了准确的内容 transition value it输出到预览元素,并用真实状态变化触发它,所以你看到的运动就是复制后的CSS会产生的运动,没有单独的动画路径可以不同意。
因为转换仅在属性发生变化时运行,所以预览需要在两者之间切换一个状态,这就是触发按钮的作用:它将元素翻转到两组值之间,以便转换启动,您可以观看它。这反映了转换在野外的工作原理,其中悬停、焦点或切换的类是它设置的。输出也保持最小,在为零时删除延迟并仅列出您添加的层,这与仅发出有意义的声明的同一学科贯穿于 梯度生成器 和 盒影生成器。
哪些浏览器支持 CSS 转换?
当前每个浏览器都支持 CSS 转换,并且已经存在了十多年。 transition property和它所有的长手都是通用的,没有前缀,所以这个生成器的输出工作在chrome,火狐,safari和edge中,没有任何供应商前缀或后备。较新的 transition-behavior: allow-discrete 能够为离散属性动画化,例如 display is lower recent,支持范围更窄,所以把那个具体技术当作渐进式增强,把不透明和可见性配对当作你的后备力量,对于权威规则,来自W3C的CSS转换模块1级规范是主要来源,一旦生成器给你感觉了碎片的配合,就值得一读。
如果您正在组装更广泛的可视化 CSS 工具、变换生成器和 CSS滤波器生成器 pair 自然与这个,因为一个转换是平滑你用它们构建的转换和过滤器。这里的所有内容都运行客户端,你复制的 CSS 是你在没有运行时、没有构建步骤和没有依赖性的情况下使用的。
常见问题
CSS过渡生成器是什么?
CSS 转换生成器是一个可视化工具,它从您选择的设置构建 CSS 转换,您选择属性、持续时间、定时功能和延迟,它输出转换速记,并带有实时预览,您可以触发以观看宽松。
我将过渡放在基态或悬停态上在哪里?
Put it on base state。base rule 上声明的转换使属性在两个方向上都动画化,进入悬停更改并返回它。仅在悬停上声明它使更改动画化,但当指针离开时,它会立即回扣。
过渡速记的顺序是什么?
顺序是属性、持续时间、定时功能、延迟,例如转换:不透明度 300ms 易于输入 100ms,第一个时间值始终是持续时间,第二个时间值始终是延迟,因此将单个时间值读作持续时间。
为什么我的显示:无显示:块转换不是动画的?
因为显示不是一个可动画的属性。none 和 block 之间没有中间值,所以浏览器没有 tween。Transition 不透明度和可见性一起代替,或者使用 transition-behaviour:允许在较新的浏览器中离散从显示中淡入:none。
我可以同时转换多个属性吗?
Yes。用逗号分隔每个转换,例如转换:不透明度300ms ease,变换200ms ease-out。此生成器在您添加图层时为您构建该列表,为每个属性提供自己的持续时间,定时功能和延迟。
什么是三次贝齐尔计时函数?
Cubic-bezier定时函数定义了从两个控制点定制的加速度曲线,写成cubic-bezier(x1,y1,x2,y2),关键词轻松、轻松、轻松和轻松是特定曲线的快捷方式,1以上或0以下控制点创建超调,这就是弹跳的构建方式。
为了获得平滑的性能,我应该使用哪些属性进行动画处理?
Prefer transform 和 opacity,它们是在 GPU 上合成,不会触发布局,所以以 60fps 动画,动画宽度、高度、顶部、左侧或边距迫使浏览器重新计算每一帧的布局,这是导致口吃过渡的最常见原因。
生成的过渡 CSS 是免费且安全使用的吗?
是的。该工具是完全免费的,没有注册或使用限制,并且它会发出每个现代浏览器都支持的标准、未修复的 CSS。所有处理都发生在您的浏览器中,因此一旦加载,就不会上传任何内容,该工具会离线工作。
