HomeStylesTemplates
StyleKit
StylesTemplates

StyleKit

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

FeedbackSupport Maintenance
Explore+
StylesTemplatesAnimationsResource LibraryPromptsCollections
Learn+
FoundationsGuideRecipesChangelogBlog
Trust+
AboutContactPrivacyTermsSupport UsRefunds

(c) 2026 StyleKit. Open source project.

闄旾CP澶?025065501鍙?3

Colophon/SK — 2026

Built with the Editorial style

01FeedbackTell us what could work better02Support MaintenanceIf StyleKit helps your workflow, voluntary support helps cover servers, domains, and ongoing upkeep.

StyleKit

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

GitHub Repository

Explore

StylesTemplatesAnimationsResource LibraryPromptsCollections

Learn

FoundationsGuideRecipesChangelogBlog

Dispatch

Get notified when new styles, templates and tools ship.

Stay Updated

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

(c) 2026 StyleKit. Open source project.

AboutContactPrivacyTermsSupport UsRefunds/陕ICP备2025065501号-3

StyleKit

Animation Patterns

Animation Library

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

60 animations

Entrance

09
Saved
600ms

Fade In Up

淡入上滑

On Mount
400ms

Scale In

缩放淡入

On Mount
600ms

Fade In Down

淡入下滑

On Mount
500ms

Slide In Left

左侧滑入

On Mount
3
600ms

Bounce In

弹性入场

On Mount
500ms

Slide In Right

右侧滑入

On Mount
S
500ms

Rotate In

旋转入场

On Mount
500ms

Zoom In

远景拉近

On Mount
+
800ms

Elastic Scale

弹簧缩放

On Mount

Exit

04
Dismissed
400ms

Fade Out Down

淡出下滑

Manual
×
300ms

Scale Out

缩放消失

On Click
400ms

Slide Out Right

右侧滑出

On Click
350ms

Collapse

折叠收起

On Click

Hover

05
200ms

Hover Lift

悬浮抬升

On Hover
Glow
300ms

Hover Glow

悬浮发光

On Hover
600ms

Flip Card

3D 卡片翻转

On Hover
Hover
600ms

Border Trace

边框描边

On Hover
Home
Blog
300ms

Underline Draw

下划线绘制

On Hover

Scroll

04
600ms

Scroll Reveal

滚动显现

On Scroll
continuous

Parallax Float

视差浮动

On Scroll
continuous

Scroll Page Turn

滚动翻页

On Scroll
continuous

Scroll Peel Away

滚动剥离

On Scroll

Text

09
Hello
3s

Typewriter

打字机效果

On Mount
Gradient
3s

Text Gradient Flow

文字渐变流动

Continuous
987
Users
2s

Counter Roll

数字滚动

On Scroll
ACMENOVAORBITZENACMENOVAORBITZEN
20s

Marquee Scroll

跑马灯滚动

Continuous
GLITCH
3s

Glitch Text

故障文字

Continuous
800ms

Text Reveal

文字揭示

On Scroll
DECODE
1.5s

Text Scramble

文字解密

On Mount
2.4s

Handwriting Reveal

手写描字

On Mount
annotatethis!
1.6s

Hand-Drawn Annotation

手绘批注划入

On Scroll

Pointer

12
continuous

Spotlight Card

聚光灯卡片

On Hover
Buy now
continuous

Magnetic Hover

磁吸悬浮

On Hover
Click
600ms

Ripple Click

涟漪点击

On Click
continuous

Cursor Aura

光晕指针

Continuous
continuous

Cursor Trail

指针轨迹

Continuous
180ms

Proximity Reveal

靠近显现

On Hover
TYPE
continuous

Text Repulsion

文字排斥

Continuous
continuous

Image Distortion

图像扭曲

Continuous
continuous

Parallax Layers

鼠标视差层

Continuous
continuous

Drag Physics

拖拽物理

Manual
View
continuous

Context Cursor

上下文光标

On Hover
continuous

3D Tilt

3D 透视倾斜

On Hover

Loading

04
2s

Skeleton Pulse

骨架屏脉冲

Continuous
Loading
1.4s

Spinner Dots

三点弹跳加载

Continuous
2s

Shimmer

微光扫过

Continuous
2s

Progress Bar

进度条加载

Continuous

Background

03
8s

Background Gradient Shift

背景渐变流动

Continuous
8s

Morph Shape

形状变形

Continuous
Beam
4s

Border Beam

边框光束

Continuous

Transition

04
500ms

Blur In

模糊到清晰

On Mount
500ms

Crossfade

交叉淡化

Manual
400ms

Slide Swap

滑动切换

Manual
600ms

Morph Transition

形态过渡

Continuous

Micro Interaction

06
500ms

Stagger Children

子元素错开动画

On Mount
Error
500ms

Shake

抖动提示

On Click
3
2s

Pulse

脉搏跳动

Continuous
Snap
800ms

Elastic Snap

弹性回弹

On Click
Online
2s

Pulse Ring

脉冲光环

Continuous
Click
1.2s

Confetti Burst

彩纸爆炸

On Click