Back to Details

anime

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Anime.js is a fast, multipurpose and lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. Version 4 introduces a modular architecture with ES modules, improved performance, and enhanced features like draggable interactions, animatable objects, and advanced timeline controls.
The skill is based on Anime.js v4.3.5, generated at 2026-01-29.
Anime.js是一款快速、多功能且轻量的JavaScript动画库，拥有简洁却强大的API。它支持CSS属性、SVG、DOM属性以及JavaScript对象的动画处理。v4版本引入了基于ES modules的模块化架构，提升了性能，并新增了可拖拽交互、可动画对象以及高级时间线控制等增强功能。
本技能基于Anime.js v4.3.5，生成于2026-01-29。

Core References

核心参考

TopicDescriptionReference
AnimationBasic animation function, target selection, property animationcore-animation
TimelineSequential and parallel animations, labels, position controlcore-timeline
StaggerStaggered animations for multiple targetscore-stagger
Animation ParametersDuration, delay, easing, loop, callbackscore-parameters
TimercreateTimer, Timer—periodic callbacks, frameRate, playbackcore-timer
主题描述参考
动画基础动画函数、目标选择、属性动画core-animation
时间线顺序与并行动画、标签、位置控制core-timeline
交错动画多目标的交错动画core-stagger
动画参数时长、延迟、缓动、循环、回调函数core-parameters
计时器createTimer、Timer——周期性回调、帧率、播放控制core-timer

Features

功能特性

Draggable

可拖拽

TopicDescriptionReference
DraggableCreate draggable elements with physics and constraintsfeatures-draggable
Draggable ConfigurationContainer bounds, snap, friction, velocityfeatures-draggable-config
主题描述参考
可拖拽创建带有物理效果与约束的可拖拽元素features-draggable
可拖拽配置容器边界、吸附、摩擦力、速度features-draggable-config

Animatable

可动画对象

TopicDescriptionReference
AnimatableCreate animatable objects for custom animationsfeatures-animatable
主题描述参考
可动画对象创建用于自定义动画的可动画对象features-animatable

Scope & Scroll

视域与滚动

TopicDescriptionReference
ScopeScroll-based animations and viewport detectionfeatures-scope
Scroll (onScroll)Scroll-linked animations, progress, link(timeline)features-scroll
主题描述参考
视域基于滚动的动画与视口检测features-scope
滚动（onScroll）滚动联动动画、进度、关联时间线features-scroll

Layout

布局

TopicDescriptionReference
Layout (AutoLayout)FLIP-style layout animations, accordion, enter/leavefeatures-layout
主题描述参考
布局（AutoLayout）FLIP风格的布局动画、手风琴效果、进入/离开动画features-layout

SVG

SVG

TopicDescriptionReference
SVG MorphingMorph SVG paths and shapesfeatures-svg-morph
SVG DrawingAnimate SVG path drawingfeatures-svg-draw
SVG Motion PathAnimate elements along an SVG pathfeatures-svg-motion-path
主题描述参考
SVG变形对SVG路径与形状进行变形动画features-svg-morph
SVG绘制对SVG路径绘制过程进行动画features-svg-draw
SVG运动路径沿SVG路径对元素进行动画features-svg-motion-path

Text

文本

TopicDescriptionReference
Text SplittingSplit text into words, lines, and charactersfeatures-text-split
Text AnimationAnimate text content and propertiesfeatures-text-animation
主题描述参考
文本拆分将文本拆分为单词、行和字符features-text-split
文本动画对文本内容与属性进行动画features-text-animation

Easings

缓动函数

TopicDescriptionReference
Easing FunctionsBuilt-in easing functions (in, out, inOut)easings-functions
Custom EasingsCubic bezier, spring, steps, linear easingseasings-custom
主题描述参考
内置缓动函数内置缓动函数（in、out、inOut）easings-functions
自定义缓动三次贝塞尔、弹簧、阶梯、线性缓动easings-custom

Utilities

工具函数

TopicDescriptionReference
UtilsDOM utilities, value helpers, math functionsutils-helpers
主题描述参考
工具函数DOM工具、值辅助函数、数学函数utils-helpers

Advanced

高级特性

TopicDescriptionReference
CompositionReplace, none, blend (additive) for overlapping animationsadvanced-composition
EngineGlobal engine—pause, resume, speed, timeUnit, precisionadvanced-engine
WAAPIWeb Animations API—waapi.animate for native animationsadvanced-waapi
Scope (createScope)Execution context, defaults, methods, keepTime, revertadvanced-scope
主题描述参考
动画合成重叠动画的替换、无合成、混合（叠加）模式advanced-composition
引擎全局引擎——暂停、恢复、速度、时间单位、精度advanced-engine
WAAPIWeb Animations API——使用waapi.animate实现原生动画advanced-waapi
视域（createScope）执行上下文、默认值、方法、保持时间、恢复advanced-scope