Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/argyleink/transition.css
:octocat: Drop-in CSS transitions
https://github.com/argyleink/transition.css
animations clip-path css hackpack keyframes masking transitions
Last synced: 5 days ago
JSON representation
:octocat: Drop-in CSS transitions
- Host: GitHub
- URL: https://github.com/argyleink/transition.css
- Owner: argyleink
- License: apache-2.0
- Created: 2020-07-28T22:25:06.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-04T17:26:59.000Z (about 1 year ago)
- Last Synced: 2024-10-30T05:57:52.604Z (5 days ago)
- Topics: animations, clip-path, css, hackpack, keyframes, masking, transitions
- Language: CSS
- Homepage: https://transition.style
- Size: 6.24 MB
- Stars: 1,891
- Watchers: 19
- Forks: 129
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- Awesome-CSS-Resources - transition.css: - in css transitions. (Frameworks / Resources / T)
- awesome-list - transition.css - in CSS transitions | argyleink | 810 | (CSS)
README
**46 pre-built transitions!**
> Hands on at [Codepen](https://codepen.io/argyleink/pen/RwrzGJb) or preview all @ [transition.style](https://transition.style)
## Basics
Import the CSS and set an attribute on some HTML: [try on Codepen](https://codepen.io/argyleink/pen/QWNRXEG)
```html
👍
```
## Installation
#### NPM
1. `npm i transition-style`
2. import from **CSS**
```css
@import "transition-style";
```
3. or import from **JS**
```js
import 'transition-style';
```
#### CDN
`https://unpkg.com/transition-style`
**Individual Category Bundles**
- **Circles** `https://unpkg.com/transition-style/transition.circles.min.css`
- **Squares** `https://unpkg.com/transition-style/transition.squares.min.css`
- **Polygons** `https://unpkg.com/transition-style/transition.polygons.min.css`
- **Wipes** `https://unpkg.com/transition-style/transition.wipes.min.css`
> Import category bundles from NPM too `import "transition-style/transition.circles.min.css"`
### 👉 The Hackpack
`https://unpkg.com/transition-style/transition.hackpack.min.css`
**More options, more control, smaller import**
by importing only the custom properties and base styles:
- compose custom transition combinations
- create multi-part transitions
- bring your own architecture with classes or CSS-in-JS or anything!
[The Hackpack Sandbox](https://codepen.io/argyleink/pen/MWyJxLx)
> Custom properties ship with each `.min.css` as well
### 🔗 Bookmarklet
Try transition.css on almost any _existing_ site! Just copy 📋 the following, create a new bookmark, and paste in the URL:
```js
javascript:(function(){var a=document.createElement("link");a.rel="stylesheet";a.href="https://unpkg.com/transition-style";document.head.append(a);})();
```
You can now go to a website and click the bookmark to try it out! Animations automatically run when you manually add classes in dev tools, or run code like this in the console:
```js
$('body').setAttribute('transition-style','in:circle:bottom-right')
```
Caveat: this bookmarklet doesn't work on websites that have a strict CSP set up.
## Usage
After `transition.css` has been added to your project, add an attribute to an element and watch the magic:
```html
A transitioned IN element
A transitioned OUT element
```
> if nothing is happening when using the attributes, it's likely `transition.css` has not loaded
Attributes were chosen as the default so there's no question which transition is active. **There can be only 1 at a time.** With classes, for example, what happens when multiple "transition in" classes are applied to an element? Transition.css chooses to default with a state machine approach so things like a classname collision doesn't need solved. See the [custom](#custom) section below for ways to use classes and/or the shape custom properties so transition.css can fit into your development environment. The built in attribute based approach is very easy to hack, customize and escape.
#### Using `@keyframes`
Each bundle ships with the `@keyframes` declared, and you can use them as you see fit. You can use these to build your own animations or just hook into the presets in your own way:
```css
.main--state-in {
animation: wipe-in-left;
animation-duration: 2s;
animation-fill-mode: both;
}
```
Checkout the [src](https://github.com/argyleink/transition.css/blob/main/src) to find the names of the `@keyframe` animations. They follow a pattern like the attributes, so you should be able to assume what they are with decent accuracy.
#### Using CSS Custom Properties
Each bundle ships with clearly named custom properties which contain the state and geometry needed to orchestrate custom transitions.
```css
.overrides {
--transition__duration: 1s; /* default: 2.5s */
--transition__easing: ease-in-out; /* default: cubic-bezier(.25, 1, .30, 1) */
--transition__delay: 1s; /* default: 0 */
}
```
or target a specific transition and override it's defaults:
```css
[transition="in:wipe:up"] {
--transition__duration: 1s;
}
```
#### Custom
Go off the rails and build your own transitions with these variables. There's even the `The Hackpack` which is exclusively the custom props 🤘💀 Here's how you can compose a brand new transition from the custom property primitives:
```css
@keyframes circle-swoop {
from {
clip-path: var(--circle-top-right-out);
}
to {
clip-path: var(--circle-bottom-right-in);
}
}
.--in-custom {
--transition__duration: 1s;
--transition__easing: ease-in-out;
animation-name: circle-swoop;
}
```
Then, in the HTML:
```html
A custom transitioned element
```
> The only rule is that you must transition from the same type of shapes
At this point you're using Transition.css to it's maximum. You can reach a huge set of transitions by using the custom properties. Have fun!
#### Play
Play and experiment with [this Codepen](https://codepen.io/argyleink/pen/RwrzGJb)
## Development
See the `svelte` branch.
## Production
`npm run bundle` concurrently bundles and minifies.