Brunobkr/llama.cpp_AlgMor24_github

1# tw-animate-css2 3[![npm version](https://img.shields.io/npm/v/tw-animate-css?color=red&logo=npm)](https://www.npmjs.com/package/tw-animate-css)4[![npm downloads](https://img.shields.io/npm/dt/tw-animate-css?color=red&logo=npm)](https://www.npmjs.com/package/tw-animate-css)5[![MIT license](https://img.shields.io/github/license/Wombosvideo/tw-animate-css)]()6[![GitHub stars](https://img.shields.io/github/stars/Wombosvideo/tw-animate-css?color=blue)](https://github.com/Wombosvideo/tw-animate-css)7 8A collection of Tailwind CSS v4.0 utilities for creating beautiful animations. Includes ready-to-use animations `accordion-down`, `accordion-up` and `caret-blink`, as well as a set of utilities for creating your own animations.9 10---11 12This package is a replacement for [`tailwindcss-animate`][Original_Plugin_GitHub]. It embraces the new [CSS-first architecture][TailwindCSS_Custom_Utilities], providing a pure CSS solution for adding animation capabilities to your Tailwind CSS project without relying on the legacy JavaScript plugin system or having to define all keywords from scratch.13 14> [!WARNING]15> The upcoming release v2.0.0 will include breaking changes. A migration script and a guide will be provided to help you transition smoothly.16 17## Table of Contents18 19- [Getting Started](#getting-started)20  - [NPM](#npm)21  - [Manual Download](#manual-download)22- [Usage](#usage)23  - [Enter/Exit Animations](#enterexit-animations)24    - [Base Classes](#base-classes)25    - [Parameter Classes](#parameter-classes)26    - [Transform Classes](#transform-classes)27  - [Ready-to-Use Animations](#ready-to-use-animations)28- [Examples](#examples)29- [Notes on Compatibility](#notes-on-compatibility)30 31## Getting Started32 33### NPM34 351. Install the package with `npm`:36 37   ```sh38   npm install -D tw-animate-css39   ```40 412. Add the following line to your `app.css` or `globals.css` file:42 43   ```css44   @import "tw-animate-css";45   ```46 473. Start using the animations!48 49   ```html50   <!-- Add an animated fade and zoom entrance -->51   <div class="animate-in fade-in zoom-in">...</div>52 53   <!-- Add an animated slide to top-left exit -->54   <div class="animate-out slide-out-to-top slide-out-to-left">...</div>55 56   <!-- Control animation duration -->57   <div class="... duration-300">...</div>58 59   <!-- Control animation delay -->60   <div class="... delay-150">...</div>61 62   <!-- And so much more! -->63   ```64 65> ℹ️ **NOTE**  66> The above guide works for esbuild, Vite and probably other bundlers too. If you are using a different bundler, the syntax may differ. [Let me know][Create_Issue] how it works and I'll update the documentation.67 68### Manual Download69 701. Download the [`tw-animate.css`][CSS_File]71   file from GitHub and place it next to your `app.css` or `globals.css` file.722. Add the following line to your `app.css` or `globals.css` file:73 74   ```css75   @import "./tw-animate.css";76   ```77 783. Start using the animations!79 80   ```html81   <!-- Add an animated fade and zoom entrance -->82   <div class="animate-in fade-in zoom-in">...</div>83 84   <!-- Add an animated slide to top-left exit -->85   <div class="animate-out slide-out-to-top slide-out-to-left">...</div>86 87   <!-- Control animation duration -->88   <div class="... duration-300">...</div>89 90   <!-- Control animation delay -->91   <div class="... delay-150">...</div>92 93   <!-- And so much more! -->94   ```95 96## Usage97 98### Enter/Exit Animations99 100To keep the README concise, I'll define a few variables:101 102- `<io>`: Specify the type of animation. This can be `in` for enter or `out` for exit animations.103- `<dir>`: Specify the direction of the slide. This can be `in-from-top`, `in-from-bottom`, `in-from-left`, `in-from-right`, `in-from-start`, `in-from-end`, `out-to-top`, `out-to-bottom`, `out-to-left`, `out-to-right`, `out-to-start`, or `out-to-end`.104- `*`: Specify a value to apply. See list of possible values.105 106#### Base Classes107 108| Class                     | Description                                                                                                |109| ------------------------- | ---------------------------------------------------------------------------------------------------------- |110| [`animate-<io>`][Docs_IO] | Base class for enter/exit animations. This needs to be applied in order for enter/exit animations to work. |111 112#### Parameter Classes113 114To customize the animation parameters, use the following classes:115 116| Class                             | Description                                                                                                                                              |117| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |118| [`duration-*`][Docs_Duration]     | Sets [`animation-duration`][MDN_Duration]. Uses `--tw-duration`, see [Tailwind CSS docs][TailwindCSS_Duration]. Defaults to `duration-150`.              |119| [`ease-*`][Docs_Ease]             | Sets [`animation-timing-function`][MDN_Ease]. Uses `--tw-ease`, see [Tailwind CSS docs][TailwindCSS_Easing]. Defaults to `ease-[ease]`.                  |120| [`delay-*`][Docs_Delay]           | Sets [`animation-delay`][MDN_Delay]. Possible values: Any `<number>`, `initial`, or any other `[<value>]`.                                               |121| [`repeat-*`][Docs_Repeat]         | Sets [`animation-iteration-count`][MDN_Repeat]. Possible values: Any `<number>`, `infinite`, `initial` or any other `[<value>]`.                         |122| [`direction-*`][Docs_Direction]   | Sets [`animation-direction`][MDN_Direction]. Possible values: `normal`, `reverse`, `alternate`, `alternate-reverse`, `initial` or any other `[<value>]`. |123| [`fill-mode-*`][Docs_Fill_Mode]   | Sets [`animation-fill-mode`][MDN_Fill_Mode]. Possible values: `none`, `forwards`, `backwards`, `both`, `initial` or any other `[<value>]`.               |124| [`running`][Docs_Running]         | Sets [`animation-play-state`][MDN_Play_State] to `running`.                                                                                              |125| [`paused`][Docs_Paused]           | Sets [`animation-play-state`][MDN_Play_State] to `paused`.                                                                                               |126| [`play-state-*`][Docs_Play_State] | Sets [`animation-play-state`][MDN_Play_State]. Possible values: `initial` or any other `[<value>]`.                                                      |127 128#### Transform Classes129 130| Class                         | Description                                                                                                                                                    |131| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |132| [`blur-in-*`][Docs_Blur]      | Applies a blur effect on the element when it enters. Possible values: `blur-in`, `blur-in-<number>`, `blur-in-(<custom-property>)`, or `blur-in-[<value>]`.    |133| [`blur-out-*`][Docs_Blur]     | Applies a blur effect on the element when it exits. Possible values: `blur-out`, `blur-out-<number>`, `blur-out-(<custom-property>)`, or `blur-out-[<value>]`. |134| [`fade-<io>`][Docs_Fade]      | Fades the element in from or out to `opacity: 0`.                                                                                                              |135| [`fade-<io>-*`][Docs_Fade]    | Fades the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`.                                |136| [`zoom-<io>`][Docs_Zoom]      | Zooms the element in from or out to `scale3D(0,0,0)`.                                                                                                          |137| [`zoom-<io>-*`][Docs_Zoom]    | Zooms the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`.                                |138| [`spin-<io>`][Docs_Spin]      | Spins the element in from or out to `rotate(30deg)`.                                                                                                           |139| [`spin-<io>-*`][Docs_Spin]    | Spins the element in from or out to the specified value. Possible values: Any `<number>` (degrees) or any other `[<value>]`.                                   |140| [`slide-<dir>`][Docs_Slide]   | Slides the element in from or out to the specified direction (`100%`).                                                                                         |141| [`slide-<dir>-*`][Docs_Slide] | Slides the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`.                               |142 143### Ready-to-Use Animations144 145| Class                                  | Description                                                                                                                                                                                              |146| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |147| [`accordion-down`][Docs_Accordion]     | Accordion down animation. Requires `--radix-accordion-content-height` or one of the [other accordion content height variables][Docs_Accordion_Content_Height] to be set to the content's height.         |148| [`accordion-up`][Docs_Accordion]       | Accordion up animation. Requires `--radix-accordion-content-height` or one of the [other accordion content height variables][Docs_Accordion_Content_Height] to be set to the content's height.           |149| [`collapsible-down`][Docs_Collapsible] | Collapsible down animation. Requires `--radix-collapsible-content-height` or one of the [other collapsible content height variables][Docs_Collapsible_Content_Height] to be set to the content's height. |150| [`collapsible-up`][Docs_Collapsible]   | Collapsible up animation. Requires `--radix-collapsible-content-height` or one of the [other collapsible content height variables][Docs_Collapsible_Content_Height] to be set to the content's height.   |151| [`caret-blink`][Docs_Caret]            | Blinking animation for caret/cursor.                                                                                                                                                                     |152 153By the way, if you don't use some of the above animations, they will not be included in the final CSS file. This is because Tailwind CSS kind of does tree-shaking for you. So, if you don't use `accordion-down`, it won't be included in the final CSS file.154 155## Examples156 157**Basic usage:**158 159```html160<div class="animate-in fade-in slide-in-from-top-8 duration-500">161  Fade in from 0% opacity,<br />162  slide from top by 8 spacing units (2rem),<br />163  with a 500ms duration.164</div>165```166 167**Advanced usage:**168 169```html170<div171  class="data-[state=show]:animate-in data-[state=hide]:animate-out fade-in slide-in-from-top-8 fade-out slide-out-to-top-8 duration-500"172  data-state="show"173>174  <p>175    If the element has the <code>data-state="show"</code> attribute,<br />176    fade in from 0% opacity,<br />177    slide from top by 8 spacing units (2rem),<br />178    with a 500ms duration.179  </p>180  <p>181    If the element has the <code>data-state="hide"</code> attribute,<br />182    fade out to 0% opacity,<br />183    slide to top by 8 spacing units (2rem),<br />184    with a 500ms duration.185  </p>186</div>187```188 189## Notes on Compatibility190 191> ℹ️ **NOTE**  192> I use only a small portion of the original plugin, so it might not be a 100% compatible drop-in replacement. If you notice any inconsistencies, feel free to contribute to this repository by opening a pull-request.193 194<!-- Links -->195 196[Original_Plugin_GitHub]: https://github.com/jamiebuilds/tailwindcss-animate197[Original_Plugin_Docs]: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/README.md198[TailwindCSS_Custom_Utilities]: https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities199[TailwindCSS_Duration]: https://tailwindcss.com/docs/transition-duration200[TailwindCSS_Easing]: https://tailwindcss.com/docs/transition-timing-function201[TailwindCSS_Delay]: https://tailwindcss.com/docs/transition-delay202[Docs_IO]: ./docs/animations/in-out.md203[Docs_Duration]: ./docs/parameters/animation-duration.md204[Docs_Ease]: ./docs/parameters/animation-timing-function.md205[Docs_Delay]: ./docs/parameters/animation-delay.md206[Docs_Repeat]: ./docs/parameters/animation-iteration-count.md207[Docs_Direction]: ./docs/parameters/animation-direction.md208[Docs_Fill_Mode]: ./docs/parameters/animation-fill-mode.md209[Docs_Running]: ./docs/parameters/animation-play-state.md#running210[Docs_Paused]: ./docs/parameters/animation-play-state.md#paused211[Docs_Play_State]: ./docs/parameters/animation-play-state.md#play-state-212[Docs_Blur]: ./docs/transforms/blur.md213[Docs_Fade]: ./docs/transforms/opacity.md214[Docs_Zoom]: ./docs/transforms/scale.md215[Docs_Spin]: ./docs/transforms/rotate.md216[Docs_Slide]: ./docs/transforms/translate.md217[Docs_Accordion]: ./docs/animations/accordion.md218[Docs_Accordion_Content_Height]: ./docs/animations/accordion.md#setting-content-height219[Docs_Collapsible]: ./docs/animations/collapsible.md220[Docs_Collapsible_Content_Height]: ./docs/animations/collapsible.md#setting-content-height221[Docs_Caret]: ./docs/animations/caret-blink.md222[MDN_Duration]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration223[MDN_Ease]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function224[MDN_Delay]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay225[MDN_Repeat]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count226[MDN_Direction]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction227[MDN_Fill_Mode]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode228[MDN_Play_State]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state229[Create_Issue]: https://github.com/Wombosvideo/tw-animate-css/issues/new230[CSS_File]: https://raw.githubusercontent.com/Wombosvideo/tw-animate-css/refs/heads/main/src/tw-animate.css231