Entrar Ainda não tem acesso?
1
resposta

[Bug] A animação não funcionou.

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 Amanda da Silva Novais
| 421.3k xp | 1 posts
<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>
1 resposta
por Renan Lima
| 4044.3k xp | 8586 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Amanda, tudo bem?

Pelo código que você postou, parece que você está tentando configurar uma animação no Tailwind CSS. No entanto, notei que há um erro de digitação na sua configuração. Em vez de "Animation", a propriedade correta é "animation" (com letra minúscula).

Tente alterar essa parte do seu código para:

animation: 'sino_kf 0.31s ease-in-out infinite'

Além disso, verifique se você adicionou a classe "animate-sino" (ou qualquer outra classe que você tenha definido) ao elemento HTML que você deseja animar.

Espero que isso ajude a resolver o problema da sua animação. Qualquer dúvida, é só perguntar!

Espero ter ajudado e bons estudos!