# argyleink/transition.css

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/argyleink-transition-css).**

2,020 stars · 127 forks · CSS · Apache-2.0

## Links

- GitHub: https://github.com/argyleink/transition.css
- Homepage: https://transition.style
- awesome-repositories: https://awesome-repositories.com/repository/argyleink-transition-css.md

## Topics

`animations` `clip-path` `css` `hackpack` `keyframes` `masking` `transitions`

## Description

Transition.css is a CSS animation library and declarative UI animation framework that provides pre-built entry and exit animations triggered directly by HTML attributes without requiring custom JavaScript. It functions as a CSS transition toolkit, supplying customizable animation sequences and geometry primitives designed for rapid web interface prototyping.

The library enables users to apply page and element transitions, trigger pre-built visual effects, and compose custom transitions by combining raw keyframes with custom state properties. Animation timing, delays, pacing curves, and transition styles can be customized globally or per element using standard CSS custom properties. 

Additional utilities include a browser bookmarklet that allows developers to inject the animation stylesheet into arbitrary live web pages to test visual effects interactively.

## Tags

### User Interface & Experience

- [CSS Animation Utilities](https://awesome-repositories.com/f/user-interface-experience/animation-libraries/css-animation-utilities.md) — Provides pre-built entry and exit animations driven by declarative HTML attributes without JavaScript.
- [Declarative Element Animators](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/dynamic-animation-controllers/dynamic-element-animation/declarative-element-animators.md) — Animates HTML elements by interpolating between declarative start and end states triggered by attributes. ([source](https://github.com/argyleink/transition.css/blob/main/README.md))
- [Declarative Animation Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-animation-frameworks.md) — Applies visual transition effects and timing variables to web elements declaratively.
- [CSS Toolkits](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-toolkits.md) — Supplies customizable animation sequences and geometry primitives designed for rapid web prototyping.
- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling.md) — Adds lightweight CSS transition effects to website elements using simple HTML attributes.
- [Custom Keyframe Sequences](https://awesome-repositories.com/f/user-interface-experience/keyframe-animation-engines/custom-keyframe-sequences.md) — Supports injecting unique keyframe definitions to build bespoke animation sequences. ([source](https://github.com/argyleink/transition.css/blob/main/README.md))
- [Page Transition Animations](https://awesome-repositories.com/f/user-interface-experience/page-transition-animations.md) — Provides visual effects to swap content between pages smoothly. ([source](https://github.com/argyleink/transition.css#readme))
- [Visual Style Customization](https://awesome-repositories.com/f/user-interface-experience/visual-style-customization.md) — Enables overriding default variables and applying visual configurations to tailor transition styles. ([source](https://github.com/argyleink/transition.css#readme))