-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
-
Hey everyone,
I just had the third time that I stumbled upon a case where it would have been very helpful to have utilities for animation like
animation-delay-75
similar to the transition-delay utility.
There are a lot possibilities for animations with the same animation applied to multiple objects only different by animation-delay, e.g. some from spinkit (https://github.com/tobiasahlin/SpinKit/blob/742a71277c49b69053b5beb9fad80d720840a2ab/spinkit.css#L126).
Currently I would just add the property in custom css or a style tag, but it would be the easiest to just add class="animation-delay-500" to one of the related divs. I could also create a custom utility with something like
@layer utilities {
.animation-delay-75 {
animation-delay: 75ms;
}
.animation-delay-500 {
animation-delay: 500ms;
}
.animation-delay-1000 {
animation-delay: 1s;
}
}
Are there any plans to include more animation utilities and if not what is the suggested way for this? Using css, style tags, custom utilities or creating two animations in the tailwind.config.js with different delays?
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 10
Replies: 13 comments 14 replies
-
Notice that some animations have a duration of less than 1 second. As we used the CSS calc() function, setting the duration through the --animation-duration property will respect these ratios. So, when you change the global duration all the animations will respond to that change
Beta Was this translation helpful? Give feedback.
All reactions
-
animation-delay would help a lot with a construct like this:
...
<div class="cool-animation"></div>
<div class="cool-animation"></div>
...
<style scoped>
.cool-animation {
@apply w-full h-full rounded-full bg-teal-500 opacity-60 absolute top-0 left-0 animate-cool;
}
</style>
I could then just add something like animation-dealy-500 to one of the classes to make it offset just the right amount instead of having to add style tags or two animations.
Beta Was this translation helpful? Give feedback.
All reactions
-
I find it unexpected and distracting that there is delay-100 for transition-delay, but there's nothing for animation-delay.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 163 -
😄 15 -
🚀 21
-
There is a plugin called tailwindcss-animation-delay. You can use it.
Link to github repo: https://github.com/burnworks/tailwindcss-animation-delay#readme
It worked for me
Beta Was this translation helpful? Give feedback.
All reactions
-
🎉 1
-
Cool. But this feature can exist in Tailwind without any plugin. I am looking for it...
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 4
-
Now you can use Arbitrary values for custom animate property.
Like that:
<span className="animate-[bounce_1s_infinite_100ms]">.</span>
Beta Was this translation helpful? Give feedback.
All reactions
-
🎉 3
-
That's just plain CSS with extra steps.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 43 -
😄 11
-
That's solve my problem
Beta Was this translation helpful? Give feedback.
All reactions
-
My solution is to write a custom utility for animation-delay based on the theme values for the transition-delay utility. This way you don't have to add a utility for every single value.
In tailwind.config.js:
plugins: [
plugin(({ matchUtilities, theme }) => {
matchUtilities(
{
"animation-delay": (value) => {
return {
"animation-delay": value,
};
},
},
{
values: theme("transitionDelay"),
}
);
}),
],
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 63 -
❤️ 39 -
🚀 19
-
This works perfectly, thanks! No need to install third-party plugins, dead simple solution. Even works with custom values like animation-delay-[2000ms]
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 7 -
❤️ 5
-
I'll use this for now, but this should be baked in to the default config.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 5 -
❤️ 4
-
This is perfect <3
Beta Was this translation helpful? Give feedback.
All reactions
-
it gives me error: plugin is not defined
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
@grandwaterman you have to import the plugin function, instructions here: https://tailwindcss.com/docs/plugins
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 5
-
i think that a solution can be just add the correct parameter in custom animations for example:
theme: {
extend: {
animation: {
"text-in": "text-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3s both"
},
keyframes: {
"text-in": {
"0%": { "filter": "blur(12px)", "opacity": "0" },
to: { "filter": "blur(0px)", "opacity": "1" },
},
},
Where de last "3s" (three seconds) written in animation refer to animation-delay propery in CSS
Beta Was this translation helpful? Give feedback.
All reactions
-
👎 1
-
This way you are restricting it for one use-case, for other place where you want different amount of delay, you need to create a new animation with new name. FYI tailwind also solves css naming problem.
Eg: To add delay of 200ms and 600ms you need to create "text-in-200" and "text-in-600" respectively. Better solutions are to either use global.css or tailwind.config and add a utility plugin.
Beta Was this translation helpful? Give feedback.
All reactions
-
I thought the idea was to avoid the tailwind.config.js file as much as possible, or at least I always try to avoid it as much as possible.
Beta Was this translation helpful? Give feedback.
All reactions
-
I found another great alternative for adding a dynamic delay. In my case, I had multiple divs as a list and wanted to add a step-wise delay for each animated div element, given the index variable (a counter indexing all elements from 0 to N):
const animationStyle = {
animationDelay: `${index*150}ms`,
animationFillMode: 'both',
};
<div className="animate-fade-in-up" style={animationStyle}> ... </div>
In my case, animate-fade-in-up is my custom keyframe animation defined in tailwind.config.js
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 4 -
❤️ 2
-
This should be default! The plugin solution worked for me.
Beta Was this translation helpful? Give feedback.
All reactions
-
💀
Beta Was this translation helpful? Give feedback.
All reactions
-
😄 3 -
👀 3
-
Another solution to this problem is to modify the delay class to generates utility classes that apply both transition-delay and animation-delay properties using this plugin.
plugins: [
plugin(function ({ matchUtilities, theme }) {
matchUtilities(
{
delay: (value: string) => {
return {
"transition-delay": value,
"animation-delay": value,
};
},
},
{
values: theme("transitionDelay"),
},
);
}),
],
Make sure to import plugin from "tailwindcss/plugin".
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 2
-
Would be great to have animation-duration as part of duration-* in v4. As a temporary solution it is required to add the following in css file:
@utility duration-0 { animation-duration: 0ms; } @utility duration-75 { animation-duration: 75ms; } @utility duration-100 { animation-duration: 100ms; } @utility duration-150 { animation-duration: 150ms; } @utility duration-200 { animation-duration: 200ms; } @utility duration-300 { animation-duration: 300ms; } @utility duration-500 { animation-duration: 500ms; } @utility duration-700 { animation-duration: 700ms; } @utility duration-1000 { animation-duration: 1000ms; }
Beta Was this translation helpful? Give feedback.
All reactions
-
Also I see that --tw-duration variable is defined in duration-* utilities, but I don't see any benefit of having it in there. That's because @utilities layer have highest priority and this variable cannot be used within css that's defined in @theme, @base and @components layers.
Beta Was this translation helpful? Give feedback.
All reactions
-
Per the OP's issue, it looks like in v4 you can do something like:
@utility animation-delay-* { animation-delay: --value(integer)ms; }
This is working fine for me, though I'd still vote to have the delay utility in core bifurcate into transition-delay and animation-delay ̄_(ツ)_/ ̄
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 6
-
Per the OP's issue, it looks like in v4 you can do something like:
@utility animation-delay-* { animation-delay: --value(integer)ms; }
Many thanks for this!
One warning though: Prettier will reformat this into animation-delay: --value(integer) ms; (adding a space before ms), resulting in broken CSS.
This solution works though:
@utility animation-delay-* { animation-delay: calc(--value(integer) * 1ms); }
As per the tailwind docs this also seems to be the recommended way.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
Any news about this ?
Beta Was this translation helpful? Give feedback.
All reactions
-
Also encountered this lil' hurdle and am surprised that it's absent from the core classes - I went with the same approach as @junket.
Beta Was this translation helpful? Give feedback.