每个开发人员都复制了一个块 @keyframes stack Overflow 的答案,粘贴进去,刷新,发现元素静止无比,十分之九的原因很无聊:中的动画名称 @keyframes 规则与中的名称不符 animation shorthand,或者持续时间留给零,或者类从未登陆过元素,另一个原因是keyframe动画是css的那些角落之一,你无法通过读取代码来判断结果,通过一系列百分比和变换告诉你任何关于运动感觉平滑,活泼或晕船,直到你看到它运行。
CSS动画是浏览器's随着时间的推移通过命名风格序列移动元素的机制,与转换不同,转换使单个更改动画化并等待触发,动画遵循a @keyframes script, 只要你喜欢多少步骤, 可以永远循环, 并且一应用它就开始自己, 它就是为加载旋转器、注意力脉冲、入口效果和每一点环境运动提供动力的东西, 让界面感觉充满活力。但是关键帧和速记这两个半部分必须完全一致, 速记将七八个值按大多数人从不记忆的顺序打包成一行。
的 CSS 动画生成器 删除猜测。您从预设库中选择一个动作,调整持续时间、缓解、延迟、迭代计数和方向,并在实时预览元素上观看其播放。该工具同时编写 @keyframes 规则和匹配 animation shorthand 放入一个可复制框中,名称已经同步,因此您粘贴的块第一次起作用。
TL;博士: CSS 动画将元素移动通过 a
@keyframes随着时间的推移排列顺序,与过渡不同的是,它不需要触发器并且可以循环。@keyframes名称和animation-namemust 完全匹配,这是动画什么都不做的最常见的一个原因,速记带有名称、持续时间、定时功能、延迟、迭代-计数、方向和填充模式,更喜欢动画transform並opacityfor smooth, composited motion。this生成器给你十四个预设, 完整的播放控制和一个实时预览, 并同时发出关键帧和速记。它完全运行在你的浏览器没有注册。
CSS动画生成器解决了什么问题?
Keyframe动画的尴尬之处在于往返,要用手调一弹你写的 @keyframes 规则,写下 animation line, 保存文件, 切换到浏览器, 等待重新加载, 观看,如果弹跳太激进你换一个 translateY value,然后再做整个循环,因为那个循环很慢,所以大多数人接受的是第一个看起来没有坏掉的版本,而不是感觉正确的版本,而这两者之间的区别正是将一个考虑的界面与模板分开的抛光。
1个循环成单击的生成器崩溃,你选择预设,拖动时长滑块,预览元素马上播放眼前的动作,从切换计时功能 ease 到一个贝塞尔曲线,感觉的变化是瞬间的。将迭代计数设置为无限,动画循环,这样你就可以研究它。几分钟后,你就建立了一个直觉,六百毫秒与十二百秒的对比,这是你需要在其他地方做出良好的运动决策的感觉。
也有一个正确性论证。你不能产生畸形的 animation value 通过从菜单和拖动滑块中进行选择,并且您不能错误输入关键帧名称,因为该工具将速记绑定到它生成的关键帧。输出始终可以安全地粘贴。这种可靠性与我保持视觉 CSS 构建器与其他属性接近的原因相同,与伸手去做相同的本能 梯度生成器 而不是在我的脑海中数颜色停止,或者 盒影生成器 而不是在模糊半径处猜测。
CSS 动画与 CSS 过渡有何不同?
This trips people up been turning up, so it worth be precise。a transition animates a single property between two states and require something to change, a hover, a focus, a toggled class, before it run。it has a start value and a end value and nothing in between an animation, by contract, follow a @keyframes 可以定义任意数量的中间步骤的规则,因此元素可以移动整个编舞,而不是从 A 到 B 的直线。它也不等待任何东西:应用它并播放。
实际的后果是,当你想要平滑状态变化时,你要达到过渡;当你想要元素固有的运动时,达到动画。悬停时变暗的按钮是一种过渡。永远旋转的旋转器、脉冲吸引眼睛的徽章或随着页面加载而滑动的卡片都是动画,因为该运动是自行发生的并且经常重复。如果您仍在决定给定效果需要哪一个,经验法则很简单:如果用户操作启动它并且它单向移动,则使用过渡;如果它自己播放、循环或有两个以上的步骤,则使用动画。 CSS 过渡生成器 是第一个案例的配套工具,这两个案例涵盖了您将要编写的大部分动作。
| 方面 | 过渡 | 动画 |
|---|---|---|
| 触发 | 需要状态更改(悬停、焦点、类) | 应用时自行开始 |
| 步骤 | 二、开始和结束 | 任何号码,通过 @keyframes |
| 循环 | 不,每次更改运行一次 | 是的,与 iteration-count |
| 典型用途 | 悬停和聚焦效果 | 旋转器、脉冲、入口 |
动画速记的正确顺序是什么?
的 animation shorthand 密集,它可以携带关键帧名称、持续时间、定时-功能、延迟、迭代-计数、方向、填充-模式和播放-状态,全部在一行上,并且两个时间值的顺序与转换的方式完全相同。例如,该生成器先写下名称,然后写入持续时间和定时-功能,然后写入可选延迟,然后写入迭代-计数、方向和填充-模式 animation: fadeIn 0.6s ease 1 both.先写名字是合法的,因为关键帧名称不是CSS关键字,而且读起来比最后埋名字更清晰。
抓住所有人的一个规则是两个时间值,持续时间和延迟都是时间,CSS只按位置告诉他们:第一个时间值是持续时间,第二个是延迟,速记中的其他所有内容都是关键字或无单位数,因此不能与时间混淆,这就是为什么工具可以在零时安全地丢弃延迟,因为无单位 1 或这个词 infinite 接下来是迭代计数,而不是第二次。生成器还省略了任何等于其 CSS 默认值的值,因此 a normal 方向或a none fill-mode 从不让输出杂乱无章,结果是一个速记,读出你知道规则后会用手写的方式。
CSS动画为什么不播放?
这是悬崖,几乎每个人都至少走过一次,最常见的原因是悬崖之间的不匹配 animation-name 和中的名字 @keyframes rule。typo,大写差,或者在一个地方被重命名而不是另一个地方的名字,使得浏览器没有关键帧规则可以绑定,所以它默默地没有任何错误,也没有警告;元素只是坐在那里。因为这个生成器从同一个名字中把两半写在一起,所以整个类的bug消失了,这是点的一大部分。
其他原因值得了解,因为它们出现在你手写动画的时候,持续时间为零意味着动画立即完成,你永远看不到它。这是一个元素 display: none does not run its animations at all, so a fade-in that depending on the element been rendered will not fire, a missing or misspelled property inside a keyframe is 悄悄地忽略了而不是标记了。and a animation with animation-fill-mode: none默认情况下,元素在完成后立即恢复到一致的样式,如果运动微妙,看起来它从未运行过。在实时预览中观看动画大部分会在几秒钟内完成,这就是构建可以看到它的运动的情况,而不是在不断重新加载的文件中。
动画填充模式做什么?
Fill mode是人们最后理解、最需要的设定,它决定了元素在动画's活动窗口之外显示的样式是什么,无论是在任何延迟时启动之前,还是在完成之后,默认的, none,表示元素在动画不运行时忽略了第一个和最后一个关键帧,所以它在动画之前以正常的样式坐着,之后会向它们弹回。那个弹回是一个非常常见的挫败感的来源:你将一个元素动画化以淡入,它会美丽地淡入,然后在动画结束的那一刻它又消失了,因为与 none 的决赛 opacity: 1 动画结束后,关键帧将被丢弃。
修复是 animation-fill-mode: forwards的,它保持动画完成后应用的最后一个关键帧,因此淡入元素保持可见。 backwards 在动画开始之前的任何延迟期间应用第一个关键帧,当您有延迟并且不希望元素首先在其默认状态下闪烁时,这很有用。 both 同时执行,并且是入口动画最安全的一般选择,这就是为什么该生成器默认为新动画 both。理解填充模式是降落的入口和自行撤消的入口之间的区别,并且通过在预览中切换它并观看结局变化比通过冷读规范来更容易掌握。
动画循环应该何时进行?我如何控制它?
Iteration count决定动画运行多少次,设置为正整数动画重复多次后停止;设置为 infinite and it loop forever。循环动画是环境的正确选择,持续的运动,显示工作正在发生的旋转器,保持动作召唤的脉冲,给英雄形象一些生命的微妙浮动。一次性动画,运行一次,是用于入口和出口,其中运动有一个明确的开始和结束,重复它会分散注意力。
方向与迭代计数配对以塑造每次传递的运行方式。默认值 normal 播放从第一个关键帧到最后一个关键帧的每次迭代。 reverse 每个人都向后播放。 alternate 运行第一个通行证向前和下一个向后,在端点之间敲击,这就是如何构建平滑的来回脉冲,而无需在关键帧中定义回程。 alternate-reverse 向后开始并从那里交替。生成器将所有四个都暴露出来,这样您就可以感受到差异:一个脉冲 alternate 自然地吸气和呼气,同时使用相同的键框 normal 并且偶数步必须对返回本身进行编码。对于循环运动, alternate 几乎总是以更少的关键帧工作产生更有机的结果。
为了获得平滑的性能,我应该使用哪些属性进行动画处理?
您动画的属性决定了运动是以每秒六十帧的光滑运行还是卡顿运行,并且选择与转换相同。更喜欢 transform 並 opacity。两者都可以交给合成器并动画化,而无需浏览器重新计算页面布局,因此即使在适度的硬件和负载下也能保持流畅,这就是为什么卡片会滑动 transform: translateY 当同一张卡片被动画化时,感觉毫不费力 top 或 margin-top feel粗糙。这个生成器预设的每个入口都是建立在 transform 並 opacity 正是出于这个原因。
避免在关键帧序列中动画化的属性是触发布局的属性: width、 height、 top、 left、 margin 並 padding。改变这些中的任何一个都迫使浏览器重新计算元素的几何形状以及每个帧上它周围的一切,这是昂贵的,也是janky动画最常见的原因,当动画循环并支付连续的成本时,会变得更糟如果你想要一个元素增长,a transform: scale 几乎总是比动画便宜 width 並 height并且看起来几乎相同。组装一组引导您走向廉价道路的工具的更广泛论点在于 web开发人员工具包 件,以及使运动成为快速决策而不是缓慢决策的工作流程习惯在 开发人员生产力工具 指南。
生成器如何保持预览的诚实?
每个可视化构建器都面临着预览和导出的代码分散的风险,直到工具教您一个不会重现的值。该生成器注入了准确的内容 @keyframes 规则它输出到页面中并准确应用 animation shorthand它向你展示到预览元素,所以你观看的运动就是你复制的css会产生的运动,没有单独的动画路径可以不同意,预览中的关键帧名称就是输出中的名称。
由于动画在安装上运行然后完成,因此预览需要一种重放它的方法,该工具可以通过在按下重放时重新安装预览元素来处理。这反映了一次性动画在制作中的行为,当元素出现时它会播放,然后根据填充模式保持其最终状态。输出也保持最小,删除零延迟和任何默认值,因此您仅复制有意义的声明,这与通过重放时不会发出任何冗余的纪律相同 CSS滤波器生成器 和其他可视化构建器。当您将关键帧动画与定位元素的布局配对时, flexbox 生成器 是建造周围结构的天然伴侣。
CSS动画支持哪些浏览器?
CSS 动画在当前的每个浏览器中都得到支持,并且已经存在了十多年。 @keyframes 规则, animation shorthand 及其所有长手都是通用且未修复的,因此该生成器的输出可在 Chrome、Firefox、Safari 和 Edge 中工作,没有供应商前缀或后备。最终参考的是 W3C 的 CSS Animations Level 1 规范,它是速记每个部分的行为的主要来源,一旦生成器为您提供了这些作品的物理可访问性,请记住,一些用户设置了一个 prefers-reduced-motion preference,而且在尊重它的媒体查询中包裹非必要的循环动画是很好的做法,因此对于觉得不舒服的人来说,可以关闭环境运动。
如果您正在组装更广泛的可视化 CSS 工具、转换生成器和 CSS变换生成器 自然地与这个坐在一起,因为变换是原材料,大多数动画都会移动,而转换处理状态变化,而动画则不会。这里的所有内容都运行客户端,并且您复制的 CSS 都是您使用的,无需运行时、无需构建步骤和依赖项。
常见问题
CSS动画生成器是什么?
CSS动画生成器是一种可视化的工具,它从你选择的设置中构建一个关键帧动画,你选择一个预设,设置持续时间,缓和,延迟,迭代计数和方向,它输出 @keyframes 规则和 animation 您可以重播速记和实时预览。
CSS动画和CSS过渡有什么区别?
A 过渡动画化两个状态之间的单个变化,需要悬停等触发器才能运行,动画遵循 a @keyframes 具有任意步数的序列,可以循环,并在应用后立即开始,无需等待状态更改。
动画速记使用什么顺序?
该工具首先写入关键帧名称,然后写入持续时间、定时功能、延迟、迭代计数、方向和填充模式,例如动画:fadeIn 0.6s ease 1。第一个时间值始终是持续时间,第二个是延迟,因此将单个时间值读作持续时间。
CSS动画循环怎么做才能永远?
将迭代计数设置为无限 在即无限这个词的速记中,如动画中:旋转1s线性无限 任何正整数反而重复多次的动画,然后根据填充模式和方向停止。
CSS动画为什么不播放?
最常见的原因是动画名称和@keyframes 名称之间的不匹配,包括拼写错误或大小写差异,这使得浏览器没有规则可以绑定。还检查持续时间是否在零之上并且元素是否被渲染,因为显示屏上的动画:没有一个元素不运行。
动画填充模式属性是做什么的?
Fill 模式决定在动画开始之前和结束之后元素显示什么样式,默认 none 在动画完成时将元素回扣到正常样式,向前设置保留最终关键帧,在延迟期间向后应用第一个关键帧,两者都同时执行。
为了获得平滑的性能,我应该使用哪些属性进行动画处理?
Prefer transform 和 opacity。浏览器可以在合成器上为它们动画化,而无需重新计算布局,因此它们在 60fps 时保持平滑。动画宽度、高度、顶部、左侧或边距迫使每帧重新计算布局,这是动画卡顿的通常原因。
生成的动画 CSS 是免费且安全使用吗?
是的。该工具是完全免费的,没有注册或使用限制,并且它会发出每个现代浏览器都支持的标准、未修复的 CSS。所有处理都发生在您的浏览器中,因此一旦加载,就不会上传任何内容,该工具会离线工作。
