Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
tailwindcss-animated
Advanced tools
Extended animation utilities for Tailwind CSS
https://tailwindcss-animated.com
Install the plugin from npm:
npm i tailwindcss-animated
Then add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('tailwindcss-animated')
],
}
This plugin brings various utility classes as well as several ready-to-use CSS animations. Here are some simple examples:
<button class="animate-wiggle">
Hej, look at me!
</button>
<button class="animate-jump-in animate-delay-300 animate-once">
Wait a bit, then jump right in.
</button>
There are several animations that can be integrated with a single utility class. These extend the Spin, Ping and Pulse animations of Tailwind CSS.
Open the configurator to see them in action:
https://tailwindcss-animated.com/configurator.html
All animations can be customized with the utility classes below.
Class | Properties |
---|---|
animate-duration-75 | animation-duration: 75ms; |
animate-duration-100 | animation-duration: 100ms; |
animate-duration-150 | animation-duration: 150ms; |
animate-duration-200 | animation-duration: 200ms; |
animate-duration-300 | animation-duration: 300ms; |
animate-duration-500 | animation-duration: 500ms; |
animate-duration-700 | animation-duration: 700ms; |
animate-duration-1000 | animation-duration: 1000ms; |
Class | Properties |
---|---|
animate-delay-none | animation-delay: 0ms; |
animate-delay-75 | animation-delay: 75ms; |
animate-delay-100 | animation-delay: 100ms; |
animate-delay-150 | animation-delay: 150ms; |
animate-delay-200 | animation-delay: 200ms; |
animate-delay-300 | animation-delay: 300ms; |
animate-delay-500 | animation-delay: 500ms; |
animate-delay-700 | animation-delay: 700ms; |
animate-delay-1000 | animation-delay: 1000ms; |
Class | Properties |
---|---|
animate-infinite | animation-iteration-count: infinite; |
animate-once | animation-iteration-count: 1; |
animate-twice | animation-iteration-count: 2; |
animate-thrice | animation-iteration-count: 3; |
Class | Properties |
---|---|
animate-normal | animation-direction: normal; |
animate-reverse | animation-direction: reverse; |
animate-alternate | animation-direction: alternate; |
animate-alternate-reverse | animation-direction: alternate-reverse; |
Class | Properties |
---|---|
animate-ease-linear | animation-timing-function: linear; |
animate-ease-in | animation-timing-function: cubic-bezier(0.4, 0, 1, 1); |
animate-ease-out | animation-timing-function: cubic-bezier(0, 0, 0.2, 1); |
animate-ease-in-out | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
Class | Properties |
---|---|
animate-fill-none | animation-fill-mode: normal; |
animate-fill-forwards | animation-fill-mode: forwards; |
animate-fill-backwards | animation-fill-mode: backwards; |
animate-fill-both | animation-fill-mode: both; |
Class | Properties |
---|---|
animate-run | animation-play-state: running; |
animate-play | animation-play-state: running; |
animate-stop | animation-play-state: paused; |
animate-pause | animation-play-state: paused; |
All variants and breakpoints (hover, focus, lg, ...) work with animations und animation utility classes.
<div class="lg:hover:animate-shake motion-reduce:animate-none">
<!-- ... -->
</div>
You can create custom properies on the fly by using square brackets. This works for Delay and Durations values.
<div class="animate-delay-[85ms] animate-duration-[2s]">
<!-- ... -->
</div>
If you want to change some animations, extend your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
extend: {
animationDelay: {
275: '275ms',
5000: '5s',
},
animationDuration: {
2000: '2s',
'long': '10s',
'very-long': '20s',
},
},
},
plugins: [
require('tailwindcss-animated')
],
}
Take a look at src/theme.js for the default settings.
FAQs
Extended animation utilities for Tailwind CSS
The npm package tailwindcss-animated receives a total of 30,205 weekly downloads. As such, tailwindcss-animated popularity was classified as popular.
We found that tailwindcss-animated demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.