animate-css
OfficialAdd smooth CSS animations to your HTML, React, and WordPress templates.
Authormsrbuilds
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill streamlines the process of adding CSS animations to HTML elements, React components, and WordPress templates. It helps users create engaging animations with ease, without manual CSS coding.
Core Features & Use Cases
- Animation Selection: Automatically picks the most contextually appropriate animation based on element type and context.
- CSS Extraction: Extracts only the required CSS from Animate.css, avoiding unnecessary file sizes.
- Scroll-Triggered Animations: Adds scroll-triggered animations for elements below the fold.
- RTL Support: Flips directional animations for RTL layouts, ensuring compatibility with Arabic, Urdu, Hebrew, etc.
- Reduced Motion Respect: Respects
prefers-reduced-motionpreference in CSS and JavaScript.
Quick Start
To animate a section, use the command /animate-css section slideInDown.
Dependency Matrix
Required Modules
animate.css
Components
scriptsassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: animate-css Download link: https://github.com/msrbuilds/animate-css-skill/archive/main.zip#animate-css Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.