Introduction

EaseMotion CSS

EaseMotion CSS is a human-readable, animation-first CSS library. Write UI with simple, English-like class names — no memorizing utilities, no complex configuration. Just readable HTML that looks great and moves beautifully.

💡

EaseMotion CSS bridges the gap between raw vanilla CSS and utility-heavy frameworks like Tailwind. You get structure and power, with none of the cognitive overhead.

Design Philosophy

EaseMotion CSS is built on four core principles:

Principle	What it means
`Human-readable`	Class names read like plain English, e.g. `ease-fade-in`, `ease-hover-glow`
`Animation-first`	Animations are first-class citizens, not accessories bolted on later
`Composable`	Stack modifier classes freely — no specificity wars
`Clean & minimal`	No dependencies, no build steps, no JavaScript required

Installation

The fastest way — drop one line into your <head>. No npm, no build step:

html

<!-- CDN — recommended, works everywhere -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.css" />

Or install via npm:

bash

npm install easemotion-css

Or import individual files from CDN:

html

<!-- Core (required, in this 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 as needed) -->
<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" />

⚠️

Always load variables.css first — all other modules depend on the CSS custom properties it defines.

Variables

All values are defined as CSS custom properties in :root. Override any token to theme the framework.

CSS Custom Properties Reference

The table below documents every --ease-* design token, its default value, purpose, and an example override.

Transition Speeds

< table class="docs-table"> VariableValue --ease-speed-fast150ms --ease-speed-medium300ms --ease-speed-slow600ms

Colors

Variable	Value
`--ease-color-primary`	#6c63ff
`--ease-color-success`	#22c55e
`--ease-color-danger`	#ef4444
`--ease-color-warning`	#f59e0b

Spacing Scale

Based on a 4px base unit: --ease-space-1 (4px) → --ease-space-16 (64px).

Utilities

Flexbox

html

<!-- Center content -->
<div class="ease-center"> ... </div>

<!-- Flex with gap -->
<div class="ease-flex ease-gap-4 ease-items-center"> ... </div>

<!-- Space between -->
<div class="ease-flex ease-justify-between"> ... </div>

Grid

html

<!-- 3-column grid -->
<div class="ease-grid ease-grid-cols-3 ease-gap-6"> ... </div>

<!-- Responsive auto-fit grid -->
<div class="ease-grid ease-grid-auto ease-gap-4"> ... </div>

Spacing

html

<div class="ease-padding-6 ease-margin-4"> ... </div>
<div class="ease-px-8 ease-py-4"> ... </div>

Animations

Add any entrance class to trigger the animation on page load. Combine with delay classes for staggered sequences.

Entrance

Class	Effect
`ease-fade-in`	Fades element from 0 → 1 opacity
`ease-slide-up`	Slides element up while fading in
`ease-slide-down`	Slides element down while fading in
`ease-slide-in-left`	Slides in from the left
`ease-slide-in-right`	Slides in from the right
`ease-zoom-in`	Scales from 85% with elastic ease
`ease-flip`	3D perspective flip from Y-axis

Looping

Class	Effect
`ease-bounce`	Infinite vertical bounce
`ease-rotate`	Infinite 360° rotation
`ease-pulse`	Infinite opacity pulse
`ease-ping`	Expands and fades (ping effect)
`ease-shake`	Horizontal shake (one-shot)

Hover Animations

Class	Effect
`ease-hover-grow`	Scales up on hover (elastic)
`ease-hover-shrink`	Scales down on hover
`ease-hover-glow`	Adds primary color glow on hover
`ease-hover-lift`	Lifts element with deeper shadow on hover
`ease-hover-underline`	Animated underline from left on hover

Delay Helpers

html

<!-- Staggered entrance sequence -->
<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>

Browser Compatibility

EaseMotion CSS core animations, utilities, and components work across modern browsers. Some advanced CSS features have limited support.

Feature	Chrome	Edge	Firefox	Safari
Core Animations	✅	✅	✅	✅
Utility Classes	✅	✅	✅	✅
CSS Custom Properties	✅	✅	✅	✅
@property	✅	✅	❌	⚠️ Partial
Scroll-Driven Animations	✅	⚠️ Partial	❌	❌

🔗

Browser support references:
@property
Scroll-Driven Animations

Buttons

All buttons require the base ease-btn class plus one or more modifier classes.

html

<!-- 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>

<!-- Sizes -->
<button class="ease-btn ease-btn-primary ease-btn-sm">Small</button>
<button class="ease-btn ease-btn-primary ease-btn-lg">Large</button>

<!-- Pill shape -->
<button class="ease-btn ease-btn-primary ease-btn-pill">Pill</button>

Cards

html

<!-- Basic card -->
<div class="ease-card">
  <h3 class="ease-card-title">Title</h3>
  <p>Card content goes here.</p>
</div>

<!-- Hover card with shadow -->
<div class="ease-card ease-card-shadow ease-card-hover">
  <div class="ease-card-header">...</div>
  <div class="ease-card-body">...</div>
  <div class="ease-card-footer">...</div>
</div>

<!-- Glassmorphism card -->
<div class="ease-card ease-card-glass">...</div>

<!-- Accent border -->
<div class="ease-card ease-card-accent">...</div>

Contributing

Contributions are welcome. Please read the CONTRIBUTING.md before submitting a pull request. All PRs are reviewed by the maintainer before merging.

🔒

Only maintainers can merge pull requests. Please do not merge your own PRs.

Naming Rules

All class names must follow the ease- prefix convention:

text

✅  ease-fade-in
✅  ease-btn-primary
✅  ease-card-hover
✅  ease-hover-glow

❌  btn-primary         (missing ease- prefix)
❌  easeFadeIn          (camelCase not allowed)
❌  ease_slide_up       (underscores not allowed)
❌  f-fade              (too abbreviated)