Animation Builder

Bouncing motion up and down

1@keyframes bounce {
2  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
3  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
4}
5
6.animate-bounce {
7  animation: bounce 1000ms ease-in-out 0ms infinite normal;
8}

1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      animation: {
6        'bounce': 'bounce 1000ms ease-in-out 0ms infinite normal',
7      },
8      keyframes: {
9        bounce: {
10          '100%': {
11                    'transform': 'translateY(-25%)',
12                    'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1)'
13          },
14          '50%': {
15                    'transform': 'translateY(0)',
16                    'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)'
17          }
18},
19      },
20    },
21  },
22}

1<div class="animate-bounce">...</div>