Micro-Animations CSS Library

Name: Micro-Animations CSS Library
Price: 1.00 USD
Availability: InStock

A tiny CSS file with 15 subtle hover and click animations for buttons and links.

Snippets — July 2024

Purchase for $1.00

Features

15 animations
Zero JS
Hardware accelerated

Drop this 2KB CSS file into any project and instantly add satisfying, smooth micro-interactions to your UI elements using simple class names.

What’s Inside

This isn't a bloated framework. It's a single, lightweight CSS file containing 15 distinct micro-interactions, each optimized for performance and visual appeal.

Button States: Enhancements for hover, focus, and active states that feel responsive and alive.
Link Interactions: Subtle animations that reward clicks and hovers without being distracting.
Hardware Acceleration: All animations run on the GPU (via transform and opacity), ensuring smooth performance even on low-end devices.
Zero Dependencies: No JavaScript required. Just copy-paste the CSS and add the utility classes.

Getting Started

Integrating the animation library is straightforward:

1. Include the CSS

Add the following <link> tag to the <head> of your HTML document:

<link rel="stylesheet" href="/css/micro-animations.css">

2. Apply the Classes

Use the provided utility classes on your interactive elements. Here are some examples:

Buttons

<!-- Soft Bounce -->
<button class="anim-btn-soft-bounce">Click Me</button>

<!-- Glow Effect -->
<button class="anim-btn-glow">Submit</button>

<!-- Slide In -->
<button class="anim-btn-slide-in">Register</button>

Links

<!-- Underline Draw -->
<a href="#" class="anim-link-underline-draw">Learn More</a>

<!-- Fade In -->
<a href="#" class="anim-link-fade-in">View Details</a>

Animation List

Class Name	Trigger	Description	Duration	Timing
`anim-btn-soft-bounce`	Hover/Active	Gentle bounce effect	0.3s	ease-out
`anim-btn-glow`	Hover	Soft outer glow expansion	0.4s	ease-in-out
`anim-btn-slide-in`	Hover	Slides in slightly on hover	0.2s	ease-out
`anim-btn-pulse`	Hover	Pulsing shadow effect	0.6s	ease-in-out
`anim-btn-shrink`	Click	Briefly shrinks on press	0.15s	ease-out
`anim-btn-pop`	Hover	Pops out slightly	0.3s	ease-out
`anim-btn-scale-up`	Hover	Gentle scaling	0.2s	ease-out
`anim-link-underline-draw`	Hover	Underline draws itself	0.3s	ease-out
`anim-link-fade-in`	Hover	Text fades in	0.2s	ease-in-out
`anim-link-pop-out`	Hover	Link pops out	0.25s	ease-out
`anim-link-slide-in`	Hover	Link slides in	0.2s	ease-out
`anim-hover-lift`	Hover	Lifts element slightly	0.3s	ease-out
`anim-hover-zoom`	Hover	Zooms in slightly	0.3s	ease-out
`anim-hover-shadow`	Hover	Adds shadow on hover	0.3s	ease-out
`anim-hover-border`	Hover	Border grows on hover	0.3s	ease-out

Customization

To customize the animations, simply edit the micro-animations.css file. You can adjust:

animation-duration: Change the speed of the animations.
animation-timing-function: Switch between different easing functions (e.g., linear, ease-in, ease-out, ease-in-out).
box-shadow / transform: Modify the visual properties of the animations.