@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-element {
animation: fadeIn 0.6s ease 1 both;
}CSS动画生成器是什么?
CSS动画生成器是CSS关键帧动画的可视化编辑器,您选择一个运动预设,如淡入、滑动、缩放、弹跳、旋转或脉冲,调整持续时间、定时功能、延迟、迭代计数、方向和填充模式,在实时预览中观看它运行,然后复制两个东西:定义运动的@keyframes规则和播放它的动画速记,它将大多数人从内存或框架复制的一块CSS变成了可以在它到达样式表之前塑造和看到的东西。
CSS动画有两个半部分必须同意@keyframes规则命名一系列步骤,每个步骤都写成与元素在该点应保持的属性值的百分比偏移,例如不透明度0时的0%和不透明度1时的100%动画属性然后引用那个关键帧名称并控制它的播放方式:它持续多久,它如何缓解,等待多久才能开始,重复多少次,以及每次传递运行哪个方向一个拼写错误的名字是动画默默无所作为的最常见原因,因为浏览器没有规则可以绑定。
Everything都在你的浏览器中运行,选择预设,拖动时长和延迟滑块,切换宽松曲线,设置动画永远重复或固定次数,按下重播再看一次,工具先用关键帧名称按安全顺序写速记,在零时掉落延迟,并省略任何与其CSS默认匹配的部分,这样输出保持可读性,没有帐户,没有上传任何内容,一旦页面加载,生成器就会继续工作。
它还使性能权衡可见。预设尽可能地进行动画变换和不透明度,因为这两个属性由合成器处理,不会迫使浏览器重新计算布局,因此它们在高帧速率下保持平滑。动画宽度、高度、顶部或边距反而重新计算每帧上的页面,这是导致口吃的常见原因。看到从 translateY 而不是顶部构建的弹跳比任何数量的阅读都更快速地了解为什么它是平滑的。
CSS动画生成器使用方法?
选择动画预设
从预设列表中选择一个动作,例如淡入、滑入、缩放、弹跳、旋转、脉冲或摇晃。每个预设都加载其关键帧以及合理的默认持续时间和宽松。
调整时间和播放
设置持续时间和延迟,选择计时功能,决定动画是重复固定次数还是无限次,并选择方向和填充模式。
预览和重播
看动画在预览元素上运行,按下重放即可重新启动,因为动画在挂载上运行,重放重新挂载了元素,这样你就可以随心所欲地看到它。
复制CSS
将生成的 @keyframes 规则和动画速记复制在一起,然后将它们粘贴到样式表中并将类应用于任何元素。
主要特点
关键帧预设库
14个现成的动作,涵盖入口、出口和循环效果,从淡入淡出和滑动到弹跳、旋转、脉冲、摇晃、翻转和心跳,每个动作都用真实的键框停止来定义
完整的播放控制
设置持续时间、延迟、计时功能、迭代计数、方向、填充模式和播放状态,并立即查看速记和实时预览中反映的每个更改
关键帧和速记一起
输出包括 @keyframes 规则和与其绑定的动画速记,因此您可以复制一个完整的工作块,而不是其中的一半
清洁、规格正确的输出
速记符首先使用关键帧名称编写,延迟为零时下降,并且省略任何默认值,因此生成的 CSS 会按照您手动编写的方式进行读取
Frequently Asked Questions
Related Tools
CSS Grid Generator
Build CSS Grid layouts visually. Set columns, rows, track sizes, gaps and alignment with a live preview, then copy the generated grid CSS - all in your browser.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
Character Counter
Count characters, words, sentences and paragraphs live as you type, estimate reading time and byte size, and check your text against social media and SEO length limits.
Comments
0 comments
No comments yet. Be the first to share your thoughts!