Human-readable. Animation-first. Zero dependencies.
Write UI like you describe it in English. No build steps. No memorizing shorthand. Just link a file and ship.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.min.css" />📖 Documentation · 🎮 Live Demo · 📦 npm · 🤝 Contributing
Looping animations in EaseMotion CSS (for example: .ease-bounce, .ease-pulse, .ease-rotate, .ease-ping, and the .ease-typewriter-loop) now respect a global CSS custom property: --ease-animation-iterations.
The default remains infinite so existing behavior is unchanged. To run looping animations a fixed number of times, override the variable in your project:
:root {
--ease-animation-iterations: 3;
}This will apply the iteration count to all looping animation utilities by default.
If EaseMotion CSS saves you time or helps your learning journey, please consider supporting it.
Most people simply forget. This is your reminder. 😊
| Action | Why it matters |
|---|---|
| ⭐ Star the repo | Helps more developers discover the project |
| 🍴 Fork and contribute | Your idea could become a real framework class |
| 🐞 Report an issue | Bugs you catch make it better for everyone |
| 💡 Suggest a feature | Good ideas ship faster than you think |
Stars cost nothing and mean everything to an independent open-source project. If this saved you even 10 minutes, it's worth a click.
| Metric | Value |
|---|---|
| 📦 npm Package | easemotion-css |
| 🌐 CDN | cdn.jsdelivr.net/npm/easemotion-css |
| ⚡ Classes | 80+ utility classes, 20+ animation classes |
| 🎨 Components | Buttons (6 variants), Cards (13 variants) |
| 🔑 Design Tokens | 60+ CSS custom properties |
| ⚖️ Bundle Size | ~15 kB (unpacked: ~62 kB) |
| 📜 License | MIT |
| 🔧 Build Step | ❌ None required |
| 🏗️ Dependencies | ❌ Zero |
EaseMotion CSS is built for modern evergreen browsers. The table below reflects the key CSS features used across the framework, demo pages, and component examples.
| Browser | backdrop-filter |
aspect-ratio |
CSS variables | Animations |
|---|---|---|---|---|
| Chrome | Supported | Supported | Supported | Supported |
| Firefox | Supported | Supported | Supported | Supported |
| Safari | Supported with -webkit-backdrop-filter fallback |
Supported | Supported | Supported |
| Edge | Supported | Supported | Supported | Supported |
EaseMotion CSS is a curated, animation-first CSS framework where class names read like plain English. No memorizing shorthand. No build steps. No configuration. Just write HTML and it works.
<!-- This is all it takes -->
<div class="ease-center ease-fade-in">
<h1 class="ease-slide-up ease-delay-100">Build faster.</h1>
<p class="ease-slide-up ease-delay-200">Animation-first CSS for humans.</p>
<button class="ease-btn ease-btn-primary ease-btn-pill ease-hover-grow ease-delay-300">
Get Started →
</button>
</div>⚡ Build beautiful animated interfaces using readable CSS classes. No build step. No configuration. Just link a file and start building.
| Vanilla CSS | Tailwind CSS | EaseMotion CSS | |
|---|---|---|---|
| Setup | Write from scratch | Build step + config | Link one file |
| Readability | ✅ High | ❌ Low (px-4 flex gap-x-2) |
✅ High (ease-center) |
| Animations | ⚙️ Manual | 🔸 Minimal | ✅ First-class |
| Zero config | ✅ | ❌ | ✅ |
| Quality control | You | You | ✅ Curated by maintainer |
| CDN ready | N/A | ❌ | ✅ Yes |
| Learning curve | High | Medium | ✅ Near zero |
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.min.css" />
</head>
<body>
<div class="ease-center ease-fade-in">
<h1>Hello, EaseMotion!</h1>
</div>
</body>
</html>Powered by jsDelivr — globally cached, always fast, no account needed. The CDN link is live the moment you paste it.
EaseMotion CSS can also be loaded using alternative CDN providers.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.min.css" /><link rel="stylesheet" href="https://unpkg.com/easemotion-css/easemotion.min.css" /><link rel="stylesheet" href="https://raw.githubusercontent.com/SAPTARSHI-coder/EaseMotion-css/main/easemotion.min.css" />jsDelivr is recommended for production usage because it provides global caching and better reliability.
npm install easemotion-cssThen in your HTML:
<link rel="stylesheet" href="node_modules/easemotion-css/easemotion.min.css" />Or in CSS / PostCSS / Sass:
@import "easemotion-css/easemotion.min.css";<!-- Font (optional — for Inter typography) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<!-- Core (always required — load in this exact order) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/variables.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/base.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/animations.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/core/utilities.css" />
<!-- Components — add only what you use -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/components/buttons.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/components/cards.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/variables.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/fade.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/slide.css" />
<!-- Add only the animation categories you need --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/all.css" />
⚠️ easemotion/variables.cssmust always load before modular animation files. It provides the shared custom properties used by all animation categories.
EaseMotion CSS is compatible with all modern browsers that support CSS3 animations and custom properties.
| Browser | Minimum Version | Status |
|---|---|---|
| Chrome | 49+ | ✅ Fully Supported |
| Firefox | 31+ | ✅ Fully Supported |
| Safari | 9.1+ | ✅ Fully Supported |
| Edge | 15+ | ✅ Fully Supported |
| Opera | 36+ | ✅ Fully Supported |
Note: EaseMotion CSS relies on CSS3 custom properties (--var) and CSS animations. Older browsers (IE 11 and below) are not supported.
EaseMotion CSS is not just a CSS library — it is a design language.
"If you can say it in English, you should be able to write it as a class."
<!-- Center this --> <div class="ease-center">
<!-- Fade this in --> <h1 class="ease-fade-in">
<!-- Make it grow on hover --><button class="ease-hover-grow">
<!-- Slide up with delay --> <p class="ease-slide-up ease-delay-200">No documentation lookup required. The class name is the documentation.
| Principle | What it means |
|---|---|
| Human-readable | Class names describe behavior in plain English |
| Animation-first | Motion is a first-class citizen, not an afterthought |
| Composable | Stack any classes freely — no specificity wars, ever |
| Curated | Every single class is maintainer-reviewed before release |
1. Contributors submit raw HTML + CSS
↓
2. Maintainer reviews and evaluates fit
↓
3. Code is converted into EaseMotion CSS format
(ease-* naming · CSS variables · accessibility)
↓
4. Integrated into core/ or components/
↓
5. Released, documented, and credited
Every class in the framework has passed through this process. The curation is what makes EaseMotion CSS consistent.
<!-- Entrance animations (fire on page load) -->
<h1 class="ease-fade-in">Fade in</h1>
<h2 class="ease-slide-up">Slide up</h2>
<h3 class="ease-slide-left">Slide left</h3>
<h4 class="ease-slide-right">Slide right</h4>
<h5 class="ease-slide-in-left">Slide from left</h5>
<h4 class="ease-zoom-in">Zoom in</h4>
<h5 class="ease-flip">3D flip</h5>
<h5>class="ease-contract-image-entrance">Contract image entrance</h5>
<!-- Staggered sequence — each item 100ms after previous -->
<div class="ease-slide-up ease-delay-100">First</div>
<div class="ease-slide-up ease-delay-200">Second</div>
<div class="ease-slide-up ease-delay-300">Third</div>
<!-- Looping animations -->
<div class="ease-bounce">Bouncing</div>
<div class="ease-pulse">Pulsing</div>
<div class="ease-rotate">Rotating</div>
<div class="ease-ping">Ping</div>
You can customize the iteration count of looping animations:
```css
:root {
--ease-animation-iterations: 3;
}By default, the value is infinite, preserving existing behavior.
<button class="ease-hover-grow">Scales up on hover</button>
<div class="ease-hover-morph-card">Morph</div>
<div class="ease-hover-glow">Primary color glow</div>
<div class="ease-hover-lift">Lifts with shadow</div>
<div class="ease-hover-shimmer">Shimmer sweep effect</div>
<a class="ease-hover-underline">Animated underline</a>
<span class="ease-hover-bounce-text">Bounce!</span>Applies a quick squish animation during hover, focus, and active interactions.
<!-- Centering (the most-used utility) -->
<div class="ease-center">Perfectly centered</div>
<!-- Flexbox -->
<div class="ease-flex ease-justify-between ease-items-center ease-gap-4">
<span>Left</span>
<span>Right</span>
</div>
<!-- Flex wrap utilities -->
<div class="ease-flex ease-flex-wrap ease-gap-3">Wrap</div>
<div class="ease-flex ease-flex-nowrap ease-gap-3">No wrap</div>
<div class="ease-flex ease-flex-wrap-reverse ease-gap-3">Reverse wrap</div>
<!-- Align self utilities -->
<div class="ease-flex ease-items-stretch ease-gap-3">
<span class="ease-self-start">Start</span>
<span class="ease-self-center">Center</span>
<span class="ease-self-end">End</span>
<span class="ease-self-stretch">Stretch</span>
</div>
<!-- Responsive auto-fit grid (no media queries needed) -->
<div class="ease-grid ease-grid-auto ease-gap-6">
<div class="ease-card">Card 1</div>
<div class="ease-card">Card 2</div>
<div class="ease-card">Card 3</div>
</div>
<!-- Grid placement utilities -->
<div class="ease-grid ease-grid-cols-4 ease-place-center ease-gap-4">
<div class="ease-col-span-2">Centered span 2</div>
<div class="ease-col-span-1">Span 1</div>
<div class="ease-col-span-1">Span 1</div>
</div>
<div class="ease-grid ease-grid-cols-3 ease-place-start ease-gap-4">Start</div>
<div class="ease-grid ease-grid-cols-3 ease-place-end ease-gap-4">End</div>Common hover-triggered animation examples are available for:
- Buttons
- Cards
- Images
Example showcase:
- hover-animation-showcase
- hover-sweep
<!-- Variants -->
<button class="ease-btn ease-btn-primary">Primary</button>
<button class="ease-btn ease-btn-success">Success</button>
<button class="ease-btn ease-btn-danger">Danger</button>
<button class="ease-btn ease-btn-outline">Outline</button>
<button class="ease-btn ease-btn-ghost">Ghost</button>
<!-- With hover animation -->
<button class="ease-btn ease-btn-primary ease-btn-hover">Animated</button>
<!-- With squish button -->
<button class="ease-btn ease-btn-primary ease-squish-button">Squish Me</button>
<!-- Sizes + shapes -->
<button class="ease-btn ease-btn-primary ease-btn-sm">Small</button>
<button class="ease-btn ease-btn-primary ease-btn-lg ease-btn-pill">Large Pill</button><!-- Hover card with shadow -->
<div class="ease-card ease-card-shadow ease-card-hover">
<div class="ease-card-header">
<h3 class="ease-card-title">Title</h3>
</div>
<div class="ease-card-body"><p>Content goes here.</p></div>
<div class="ease-card-footer">
<button class="ease-btn ease-btn-primary ease-btn-sm">Action</button>
</div>
</div>
<!-- Glassmorphism -->
<div class="ease-card ease-card-glass">Glass card</div>
<!-- Neumorphic -->
<div class="ease-card ease-card-neumorphic">Soft UI card</div>
<!-- Accent border -->
<div class="ease-card ease-card-accent">Highlighted card</div><section class="ease-center ease-padding-16">
<h1 class="ease-fade-in">Build faster.</h1>
<p class="ease-slide-up ease-delay-200">Animation-first CSS for humans.</p>
<button class="ease-btn ease-btn-primary ease-btn-lg ease-btn-pill ease-hover-grow ease-delay-300">
Get Started →
</button>
</section>Override any CSS custom property to theme the entire framework — no Sass, no PostCSS, just CSS:
:root {
/* Colors */
--ease-color-primary: #f97316; /* swap to orange */
--ease-color-success: #10b981; /* teal green */
/* Motion */
--ease-speed-fast: 100ms; /* snappier */
--ease-speed-medium: 400ms; /* slightly slower */
--ease-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Shape */
--ease-radius-md: 1rem; /* rounder corners */
--ease-radius-full: 9999px;
/* Shadows */
--ease-shadow-md: 0 4px 20px rgba(0,0,0,0.15);
}EaseMotion wraps all its CSS behind @layer cascade layers. Your own styles always win — even if the framework loads after your stylesheet:
/* Your custom overrides — always takes priority */
@layer easemotion.components {
.ease-btn-primary {
background: var(--ease-color-orange);
border-radius: 2rem;
}
}No !important needed.
Tailwind is a utility-first framework built around short atomic class names and usually fits best in a build-driven workflow. EaseMotion CSS focuses on human-readable class names like ease-center and ease-fade-in, treats animation as a first-class feature, and is designed to work immediately by linking a stylesheet.
Yes. EaseMotion CSS works with React, Vue, plain HTML, or any framework that renders standard class attributes. You can install it from npm, import the stylesheet, and use the classes directly in your components.
Open or claim an issue first for non-trivial ideas, then add your raw demo inside submissions/examples/your-feature-name/ with demo.html, style.css, and README.md. The maintainer reviews it, standardizes naming, and integrates it into the framework if it fits the project.
Yes. That is one of the core goals of EaseMotion CSS. You can use the CDN link or local CSS files directly without configuring a bundler, compiler, or build pipeline.
EaseMotion CSS is designed to work with modern evergreen browsers and relies on widely supported CSS features such as CSS Variables, Flexbox, CSS Grid, Transforms, Transitions, and Keyframe Animations.
| Browser | Supported Versions |
|---|---|
| Chrome | Latest stable version |
| Firefox | Latest stable version |
| Safari | Latest stable version |
| Edge | Latest stable version |
Internet Explorer (IE 11 and earlier) is not supported.
easemotion-css/
├── easemotion.css ← readable source entry point
├── easemotion.min.css ← bundled production build
│
├── core/ ← MAINTAINER-ONLY
│ ├── variables.css ← 60+ design tokens
│ ├── base.css ← reset + typography (Inter font)
│ ├── animations.css ← 20+ animation classes
│ └── utilities.css ← 80+ layout utilities
│
├── components/ ← MAINTAINER-ONLY
│ ├── buttons.css ← 6 variants, 4 sizes, pill, icon
│ └── cards.css ← 13 card variants
│
├── submissions/ ← CONTRIBUTOR AREA
│ ├── README.md ← full submission workflow
│ └── examples/
│ ├── hover-grow/ ← [INTEGRATED] → ease-hover-grow
│ ├── hover-shimmer/ ← [INTEGRATED] → ease-hover-shimmer
│ ├── card-lift/ ← [INTEGRATED] → ease-card-lift
│ └── button-glow/ ← pending review
│
├── examples/demo.html ← source interactive showcase
├── docs/demo.html ← deployed live demo page
├── docs/index.html ← full documentation site
│
├── .github/
│ ├── CODEOWNERS
│ ├── ISSUE_TEMPLATE/
│ │ ├── feature_request.md
│ │ └── bug_report.md
│ └── PULL_REQUEST_TEMPLATE.md
│
├── VISION.md ← long-term project direction
├── CHANGELOG.md ← full release history
├── CONTRIBUTING.md ← contribution guide
├── LICENSE ← MIT © 2026 Saptarshi Sadhu
└── README.md
Track progress and vote on features via GitHub Issues.
| Feature | Status |
|---|---|
| ✅ Human-readable core utilities (80+) | Shipped — v1.0 |
| ✅ Animation-first motion library (20+) | Shipped — v1.0 |
| ✅ Curated contribution pipeline | Shipped — v1.0 |
| ✅ Component library (buttons, cards) | Shipped — v1.0 |
| ✅ npm package + jsDelivr CDN | Shipped — v1.0 |
| ✅ Full documentation site | Shipped — v1.0 |
| 🔜 Form components (inputs, checkboxes, toggles) | Planned — v1.1 |
| 🔜 Dark mode token layer | Planned — v1.1 |
| 🔜 Modal & tooltip components | Planned — v1.2 |
| 🔜 Scroll-triggered animations (IntersectionObserver) | Planned — v1.2 |
| 🔜 Navigation components (navbar, sidebar) | Planned — v1.3 |
| 🔜 CSS-only accordion & tabs | Planned — v1.3 |
| 🔜 Badge, tag, avatar, progress bar | Planned — v1.3 |
| 🔜 Theming CLI (generate custom token file) | Exploring |
EaseMotion CSS is a curated, maintainer-reviewed framework. Contributors submit raw ideas — the maintainer handles standardization, naming, and integration.
✅ Add a folder to submissions/examples/your-feature/
✅ Include: demo.html + style.css + README.md
✅ Use any class naming — no ease- prefix required
✅ One feature per PR
❌ Edit core/ → PR closed without review
❌ Edit components/ → PR closed without review
❌ Merge their own PRs → Maintainer-only
❌ Claim more than 2 active issues at once
Your raw CSS → Maintainer standardizes → ease-* class ships
.hover-grow ease-hover-grow core/animations.css
- Beginner-friendly — write raw CSS, no conventions to memorize
- Learn real system design — see how raw ideas become a coherent API
- Your idea ships — accepted submissions become real framework classes
- Credited in CHANGELOG — your contribution is documented permanently
- Your name in the README — see the contributor wall below
📖 Read the full guide → CONTRIBUTING.md
| Label | Used for |
|---|---|
good first issue |
Easy entry points, perfect for first-time contributors |
animation |
Hover effects, entrance animations, keyframe ideas |
component |
New UI components (modals, tooltips, badges, etc.) |
enhancement |
Improvements to existing classes |
documentation |
README, docs site, submission guide |
curated |
Accepted into the framework |
maintainer-approved |
Reviewed, pending integration |
featured |
Exceptional submission — will be showcased |
Issue Cooldown Rule: Maximum 2 active assigned issues per contributor. Issues with no progress for 5 days are unassigned and reopened.
| Platform | Link |
|---|---|
| 🐛 Bug Reports | Open an issue |
| 💡 Feature Requests | Request a feature |
| 🔀 Pull Requests | Submit a contribution |
| 📖 Documentation | Full docs site |
| 📦 npm Package | easemotion-css on npm |
| 🌐 CDN | jsDelivr |
| 🏆 GSSoC 2026 | GirlScript Summer of Code |
⭐ If EaseMotion CSS saves you time, consider starring the repo. It helps more developers discover the project and motivates continued development.
Everyone who has submitted a PR, opened an issue, or contributed an idea. This wall regenerates automatically on every push to main.
Auto-updated daily · View all →
Saptarshi Sadhu
EaseMotion CSS is designed, curated, and actively maintained by Saptarshi Sadhu. All contributions are reviewed and standardized before integration. The framework does not accept unreviewed direct edits.
Only the maintainer merges pull requests. This is enforced via CODEOWNERS.
See CHANGELOG.md for the full release history.
Latest: v1.0.0 — Initial public release. 80+ utilities, 20+ animations, buttons, cards, full docs site, npm + CDN.
MIT © 2026 Saptarshi Sadhu — see LICENSE for details.
You are free to use EaseMotion CSS in personal and commercial projects. Attribution appreciated but not required.
Thank you for building EaseMotion CSS with me. 💜
Every star, every PR, every issue — it all adds up.
— Saptarshi Sadhu · @SAPTARSHI-coder
Built with care · Zero dependencies · Animation-first · Community-driven
EaseMotion CSS supports the prefers-reduced-motion media query to respect users who prefer reduced motion and reduce animation-related discomfort. When enabled at the operating system level, animations and transitions are minimized to provide a more accessible experience.
/**
- Improve heading hierarchy for better readability
- Ensure consistent spacing between sections
- Use proper Markdown formatting for code blocks and lists
- Align all installation and usage steps properly
- Introduction
- Features
- Tech Stack
- Installation
- Usage
- Project Structure
- Contribution Guidelines
- License
- Add badges (optional): build, license, contributors
- Add screenshots for better UI understanding
- Standardize code blocks for commands
Improve onboarding experience for new contributors and users by making README more structured, readable, and professional. */