Entrar Ainda não tem acesso?
1
resposta

[Bug] Animação Sino não está funcionando

Referente ao curso Tailwind CSS: estilizando a sua página com classes utilitárias, no capítulo Animações com Tailwind CSS e atividade Criando uma animação customizada

por Victor Daniel Martins Feitosa
| 37.7k xp | 7 posts
Auxiliar de Informática

Assisti o video novamente, olhei as dúvidas do fórum, mas não consegui solucionar o bug, segue o código:

<script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        azul: {
                            claro: '#C5DFFF',
                            escuro: '#061E3C',
                            hover: '#1057B0'
    
                    },
                    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>

<div class="self-center relative group ">
                <svg class="fill-azul-escuro absolute top-0 left-1 opacity-0 group-hover:opacity-100 group-hover:animate-ping"

<svg class="w-12 h-12 fill-azul-claro stroke-azul-escuro group-hover:animate-sino"

o que pode estar errado neste código?

1 resposta
por Renan Lima
| 3792.4k xp | 8026 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Victor! Tudo bem?

Pelo código que você compartilhou, parece que o problema está na definição da animação "sino". Verifique se você está aplicando corretamente a classe "animate-sino" no elemento SVG que deseja animar.

Além disso, certifique-se de que você está importando corretamente o Tailwind CSS e que as classes utilitárias estão sendo aplicadas corretamente nos elementos.

Uma sugestão para resolver o problema é verificar se você está importando corretamente o arquivo CSS do Tailwind e se as classes utilitárias estão sendo aplicadas nos elementos SVG.

Por exemplo, você pode adicionar a classe "animate-sino" ao elemento SVG que deseja animar da seguinte forma:

<svg class="w-12 h-12 fill-azul-claro stroke-azul-escuro animate-sino">

Verifique também se você está utilizando a versão correta do Tailwind CSS e se todas as dependências estão instaladas corretamente.

Espero ter ajudado e bons estudos!