easing cubic-bezier industrial mechanical precise animation button background slide transitions card reveal animations section entrance effects standard ease/ease-in-out feel generic need distinctive motion personality want mechanical-feeling transition curve
Industrial
Fetch snippet JSON:
curl https://webspire.de/snippets/easing/industrial.json
spring
bounce
elastic
Background
Customize
Quick Start
transition: all 0.5s var(--ease-industrial)Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 69 bytes · 3 lines
- Custom Properties
-
--ease-industrial
easing cubic-bezier industrial mechanical precise animation
A signature easing curve cubic-bezier(0.62, 0.83, 0.34, 0.93) with fast start, early peak, and long gentle deceleration. Feels mechanical and precise — ideal for industrial, tech, or angular designs.
Usage
.element {
transition: transform 0.5s var(--ease-industrial);
}