Adding 'animate-float'

[GargDivanshu]

I wanted to use an animate-float property in one of my projects, it is a bit similar to animate-bounce, with difference that the animation that in 'float' is supposed to be a bit smoother. It was easy to implement in project by defining everything in global.css but 'float' property is as popular as ping, spin, etc which are already there in tailwind.

I want to work on this myself, and thus wants to know if I should move forward with the implementation of this feature.

[purinnull]

I wanted to use an animate-float property in one of my projects, it is a bit similar to animate-bounce, with difference that the animation that in 'float' is supposed to be a bit smoother. It was easy to implement in project by defining everything in global.css but 'float' property is as popular as ping, spin, etc which are already there in tailwind.

I want to work on this myself, and thus wants to know if I should move forward with the implementation of this feature.

Hi @GargDivanshu.

Im using Nuxt 3 in my project and i did the follow steps to make a float animation:

1. In your tailwind.config.js add the following code

module.exports = {
  // ... your configs ...
  theme: {
    extend: {
      keyframes: {
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-10px)' },
        },
      },
      animation: {
        float: 'float 3s ease-in-out infinite',
      },
    },
  },
  plugins: [],
}

2. Then apply to your element in your html template , like:

<img src="https://i.ibb.co/0n6DSS3/bgimg.png" class="absolute w-full -ml-12 mt-24 animate-float" />

It's worked for me. Good bye

[Ahm3d-KA]

Nice one