[Bug] Animação não está funcionado

<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    azul: {
                        claro: '#C5DFFF',
                        escuro: '#061E3C',
                        hover: '#1857B0',
                        
                    },
                },
                fontFamily: {
                    inter: ['Inter', 'sans-serif']
                },
                keyFrames: {
                    sino_kf: {
                        '0%, 100%': {
                            transform: 'rotate(-10deg)'
                        },
                        '50%': {
                            transform: 'rotate(10deg)'
                        }
                    }
                },
                animation: {
                    sino: 'sino_kf 0.31s ease-in-out infinite'
                }
            }
        }
    }
</script>
              ...
            <svg class="w-12 h-12 fill-azul-claro stroke-azul-escuro group-hover:animate-sino" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
            </svg>
        </div>