Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kirklin/unocss-preset-ease
UnoCSS preset: easing functions to transitions for effortless animation timing in styles.
https://github.com/kirklin/unocss-preset-ease
unocss unocss-preset
Last synced: 8 days ago
JSON representation
UnoCSS preset: easing functions to transitions for effortless animation timing in styles.
- Host: GitHub
- URL: https://github.com/kirklin/unocss-preset-ease
- Owner: kirklin
- License: mit
- Created: 2023-08-25T15:43:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-10T13:34:28.000Z (5 months ago)
- Last Synced: 2025-01-09T09:56:29.238Z (about 1 month ago)
- Topics: unocss, unocss-preset
- Language: HTML
- Homepage:
- Size: 287 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-unocss - unocss-preset-ease - Easing Functions as Transitions. (Presets)
- awesome-unocss - unocss-preset-ease - Easing Functions as Transitions. (Presets)
README
# Unocss Preset Ease
## Introduction
Unocss Preset Ease is a collection of easing utility classes designed to make it easy for you to add smooth and realistic animations to your projects using the UnoCss CSS framework.
This preset provides a range of pre-defined easing functions that you can apply directly to your HTML elements to achieve more natural and lifelike animations.
## Install
To get started with Unocss Preset Ease, follow these simple steps:
### 1. Install Unocss
```bash
npm i -D unocss
```
### 2. Install Unocss Preset Ease
```bash
npm i -D unocss-preset-ease
```
### 3. Configure Unocss to use the Ease preset.
In your project's Unocss configuration file (usually named ),
import the preset and add it to the section:`unocss.config.js`
```ts
// uno.config.ts
import presetEase from "unocss-preset-ease";
import { defineConfig, presetUno } from "unocss";
export default defineConfig({
presets: [
presetUno(),
presetEase(),
// ...custom presets
],
});
```
## Usage
Unocss Preset Ease provides a variety of classes that you can apply directly to your HTML elements.
These classes apply easing functions to various CSS properties to create smooth animations. Here's how you can use them:
```html
This element will animate smoothly with an ease-in-out easing function when its Y position changes.
```
In this example, the class applies an easing function that starts slow, accelerates in the middle,
and slows down again towards the end of the animation.
The class specifies the animation duration in milliseconds,
and the class indicates that the Y position of the element should be animated using a translation transformation.
## Easing Functions
Easing functions specify the rate of change of a parameter over time, allowing you to create more natural animations that mimic real-world motion. The available easing functions in this preset include:
- ease-in
- ease-out
- ease-in-out
- and more...
## License
[MIT](./LICENSE) License © 2022-PRESENT [Kirk Lin](https://github.com/kirklin)