Download
Effeckt.css is a showcase and toolkit of high-performance UI transitions and animations for the web. It catalogs common interaction patterns—button states, list reveals, modals, off-canvas menus, and page transitions—implemented with CSS transforms and opacity for smooth, GPU-friendly motion. The project focuses on practical details such as using compositing-friendly properties, keeping DOM structures lean, and providing hooks so JavaScript can toggle classes without micromanaging animation state. Each effect is isolated, documented, and demoed, allowing designers to copy just what they need rather than dragging in a monolithic framework. By standardizing names and behaviors, it helps teams keep motion design consistent across a product while remaining easy to theme. The library doubled as a learning resource during the rise of CSS animations, showing how to achieve polished interactions without heavy JavaScript.
Features
- Predefined CSS classes for entrance / exit animations (slide in/out, flip, fall, etc)
- Modal transition effects (popups appearing from above, below, whole-screen, etc)
- Button and UI element animation effects (expand, fill, zoom, icon transitions)
- List item animations (gap, slide, wobble, flip)
- 3D / depth transitions (rotate, sign, slit, blur effects)
- CSS-only approach (no JS dependency for core effects)
Project Samples
