Entrar Ainda não tem acesso?

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

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
| 4245.7k xp | 9015 posts

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!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA