How to define a custom animation / keyframes with Twind?

[zaynetro]

Tailwind CSS allows to defined custom animation and keyframe values in user config: https://tailwindcss.com/docs/animation#using-custom-values

How can I achieve something similar with Twind?

My current solution is to manually include keyframe styles on the page:

const customStyles = `
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
`;

...

<style dangerouslySetInnerHTML={{ __html: customStyles }} />

and then

<div class="animate-[fadeIn_0.2s_ease-in-out]">

[marvinhagemeister]

See the twind docs: https://twind.dev/handbook/css-in-twind.html#the-keyframes-function

[zaynetro]

Thanks! I was reading their new https://twind.style/ website and couldn't find anything I could understand about animations. Luckily, the examples from the old website worked.

So fade in animation using twind v1 could be done like this

import { animation, keyframes } from "@twind/core";

const fadeIn = animation(
  "0.2s ease-in-out",
  keyframes({
    "0%": {
      opacity: 0,
    },
    "100%": {
      opacity: 1,
    },
  }),
);

<div class={`${fadeIn}`}>