HomeStylesTemplates
StyleKit
StylesRecipesGuidesAnimationsTemplates

StyleKit

A curated web design style library to help AI generate better-looking websites.

Navigation

StylesTemplatesCommunityGuideBlogChangelog

Resources

UI Design PromptsLanding Page PromptsDashboard PromptsTailwind UI PromptsDark Mode UI PromptsGitHub Repository

Stay Updated

By subscribing, you agree to our Privacy Policy and Terms.


Support Maintenance

If StyleKit helps your workflow, voluntary support helps cover servers, domains, and ongoing upkeep.

Scan to support / View all options

(c) 2026 StyleKit. Open source project.

AboutContactPrivacyTermsBuilt with the Editorial style
Stylekit前端样式库stylekit.top陕ICP备2025065501号-3

Animation Patterns

Animation Library

Ready-to-copy CSS animation patterns. Each includes CSS keyframes and Tailwind utility class code.

49 animations

Entrance
600ms

Fade In Up

淡入上滑

元素从下方淡入并向上滑动,最常见的入场动画之一。

BeginnerOn Mount
Entrance
400ms

Scale In

缩放淡入

元素从缩小状态放大至原始尺寸并淡入,适合卡片、弹窗等组件入场。

BeginnerOn Mount
Hover
200ms

Hover Lift

悬浮抬升

鼠标悬停时元素向上移动并加深阴影,营造悬浮立体感。

BeginnerOn Hover
Text
3s
Hello

Typewriter

打字机效果

文字逐字显现并带有闪烁光标,模拟打字机输入效果。

IntermediateOn Mount
Loading
2s

Skeleton Pulse

骨架屏脉冲

骨架屏加载占位符的脉冲闪烁效果,提示用户内容正在加载中。

BeginnerContinuous
Entrance
600ms

Fade In Down

淡入下滑

元素从上方淡入并向下滑动,常用于导航栏、下拉菜单入场。

BeginnerOn Mount
Entrance
500ms

Slide In Left

左侧滑入

元素从左侧滑入视口,适合侧边栏、抽屉菜单等组件。

BeginnerOn Mount
Hover
300ms
Glow

Hover Glow

悬浮发光

鼠标悬停时元素边框发出柔和光晕,适合 CTA 按钮和交互卡片。

BeginnerOn Hover
Scroll
600ms

Scroll Reveal

滚动显现

元素进入视口时淡入显现,利用 IntersectionObserver 实现滚动触发。

IntermediateOn Scroll
Scroll
continuous

Parallax Float

视差浮动

元素随滚动以不同速率移动,产生深度视差效果,增强页面层次感。

IntermediateOn Scroll
Text
3s
Gradient

Text Gradient Flow

文字渐变流动

文字颜色以渐变方式持续流动变化,吸引注意力的标题效果。

BeginnerContinuous
Loading
1.4s

Spinner Dots

三点弹跳加载

三个圆点依次弹跳的加载指示器,轻量且易于实现。

BeginnerContinuous
Background
8s

Background Gradient Shift

背景渐变流动

背景渐变颜色持续缓慢流动变化,营造动态氛围感。

BeginnerContinuous
Micro Interaction
500ms

Stagger Children

子元素错开动画

子元素依次错开执行入场动画,通过延迟差营造流畅的序列感。

IntermediateOn Mount
Transition
500ms

Blur In

模糊到清晰

元素从模糊状态逐渐变清晰并淡入,营造柔和的过渡入场效果。

BeginnerOn Mount
Micro Interaction
continuous

Spotlight Card

聚光灯卡片

鼠标在卡片上方移动时,呈现手电筒照亮卡片局部的光影跟随效果。

AdvancedOn Hover
Micro Interaction
continuous

Magnetic Hover

磁吸悬浮

鼠标靠近目标元素时,元素会像被磁铁吸引一样向鼠标指针方向产生弹性位移。

IntermediateOn Hover
Entrance
600ms

Bounce In

弹性入场

元素以弹性缩放方式入场,从小尺寸弹跳过冲后稳定在原始大小,充满活力感。

BeginnerOn Mount
Entrance
500ms

Slide In Right

右侧滑入

元素从右侧滑入视口,适合侧面板、抽屉菜单和分屏布局的入场效果。

BeginnerOn Mount
Entrance
500ms

Rotate In

旋转入场

元素从反向旋转并透明的状态旋转至正位并淡入,适合图标和趣味性入场。

IntermediateOn Mount
Micro Interaction
500ms
Error

Shake

抖动提示

元素在水平方向快速抖动,常用于表单校验失败或错误提示的视觉反馈。

BeginnerOn Click
Hover
600ms

Flip Card

3D 卡片翻转

卡片沿 Y 轴进行 3D 翻转,显示背面内容,需要透视容器和 backface-visibility 控制。

AdvancedOn Hover
Micro Interaction
600ms
Click

Ripple Click

涟漪点击

点击时从触发点产生向外扩散的圆形涟漪效果,Material Design 风格的经典交互反馈。

IntermediateOn Click
Text
2s
987

Counter Roll

数字滚动

数字通过垂直滚动方式从 0 滚动至目标值,适合数据面板和统计展示。

IntermediateOn Scroll
Background
8s

Morph Shape

形状变形

通过 border-radius 过渡实现有机的 blob 形状连续变形,适合装饰性背景元素。

AdvancedContinuous
Exit
400ms

Fade Out Down

淡出下滑

元素向下滑动并逐渐消失,最常见的退场动画之一。

BeginnerManual
Entrance
500ms

Zoom In

远景拉近

元素从远处快速拉近至原始尺寸,带有强烈的纵深感和冲击力。

BeginnerOn Mount
Text
20s
ABCDABCD

Marquee Scroll

跑马灯滚动

文字或内容水平无限循环滚动,常用于公告栏、品牌展示和合作伙伴列表。

IntermediateContinuous
Loading
2s

Shimmer

微光扫过

光线从左到右扫过元素表面,Apple 风格的加载占位符效果。

BeginnerContinuous
Micro Interaction
2s
3

Pulse

脉搏跳动

元素以心跳般的节奏缩放跳动,常用于提示用户注意或表示活跃状态。

BeginnerContinuous
Micro Interaction
800ms
Snap

Elastic Snap

弹性回弹

元素被拉伸后像橡皮筋一样弹性回弹到原位,充满物理质感的趣味交互。

IntermediateOn Click
Hover
600ms
Hover

Border Trace

边框描边

边框像被画笔描绘一样逐渐显现,从一角开始沿四边绘制完成。

AdvancedOn Hover
Text
3s
GLITCH

Glitch Text

故障文字

文字以数字故障风格闪烁和偏移,带有赛博朋克美学的视觉冲击力。

AdvancedContinuous
Exit
300ms

Scale Out

缩放消失

元素缩小并淡出,适合弹窗关闭、气泡消失等退场场景。

BeginnerOn Click
Exit
400ms

Slide Out Right

右侧滑出

元素向右侧滑出视口并消失,适合侧面板关闭、抽屉菜单收起等退场效果。

BeginnerOn Click
Exit
350ms

Collapse

折叠收起

元素高度从完整状态收缩至零并淡出,适合手风琴、FAQ 折叠面板等场景。

IntermediateOn Click
Transition
500ms

Crossfade

交叉淡化

两个元素交叉切换:一个淡出的同时另一个淡入,实现平滑的内容过渡。

IntermediateManual
Transition
400ms

Slide Swap

滑动切换

新旧内容以水平滑动方式交替切换,旧内容滑出左侧的同时新内容从右侧滑入。

IntermediateManual
Transition
600ms

Morph Transition

形态过渡

元素在两种形态之间平滑过渡,包括尺寸、圆角、颜色等属性的同步变化。

AdvancedContinuous
Text
800ms

Text Reveal

文字揭示

文字通过遮罩从下方逐行揭示显现,常用于英雄区标题和关键文案的戏剧性入场。

IntermediateOn Scroll
Hover
300ms
Home
Blog

Underline Draw

下划线绘制

鼠标悬停时下划线从左到右绘制展开,离开时反向收回,经典的导航链接交互效果。

BeginnerOn Hover
Loading
2s

Progress Bar

进度条加载

进度条从左到右填充并带有光泽扫过效果,适合加载状态和进度指示场景。

BeginnerContinuous
Entrance
800ms
!

Elastic Scale

弹簧缩放

元素以弹簧物理效果入场,多次过冲和回弹后稳定,比 bounce-in 更夸张的弹性感。

IntermediateOn Mount
Micro Interaction
2s
Online

Pulse Ring

脉冲光环

从元素中心向外扩散的脉冲圆环效果,适合状态指示器、在线标志和注意力引导。

BeginnerContinuous
Text
1.5s
DECODE

Text Scramble

文字解密

文字以随机字符快速滚动后逐字解密为最终内容,常见于黑客终端和科技品牌网站。

IntermediateOn Mount
Hover
continuous

3D Tilt

3D 透视倾斜

鼠标在卡片上移动时,卡片随鼠标位置产生 3D 透视倾斜效果,营造沉浸式的空间深度感。

IntermediateOn Hover
Micro Interaction
1.2s
Click

Confetti Burst

彩纸爆炸

点击时从触发点向四周射出彩色纸片粒子,适合成功状态、庆祝和游戏化场景的视觉反馈。

AdvancedOn Click
Scroll
continuous

Scroll Page Turn

滚动翻页

滚动驱动的 3D 翻页效果,页面像书页一样沿 Y 轴翻转剥离,露出下一页内容。

AdvancedOn Scroll
Scroll
continuous

Scroll Peel Away

滚动剥离

滚动驱动的页面剥离效果,当前页面像贴纸一样从右上角卷起剥离,露出下一层内容。

AdvancedOn Scroll