Using custom animations in UnoCSS

You can quite easily add custom animations in UnoCSS. In uno.config.js add this:

theme: {
    animation: {
      keyframes: {
        "in-out-custom":
          "{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:translate3d(0,-1500px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:translate3d(0,0,0)}}",
      },
      durations: {
        "in-out-custom": "1s",
      },
      timingFns: {
        "in-out-custom": "ease-in-out",
      },
      counts: {
        "in-out-custom": "infinite",
      },
    },

  },

After that you can use it with animate-in-out-custom. After tweaking the animation and you’re happy with it you can set the counts value to 1 if it should only animate once.

It is also possible to use arbitrary values for the animation if you do something like this: class: "animate-[in-out-custom_2s_ease-in-out_infinite] keyframes-in-out-custom"