Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Desafio: Implementar Animação CSS | Animações CSS Avançadas
Técnicas Avançadas de CSS

bookDesafio: Implementar Animação CSS

Tarefa

Aprimorar o apelo visual do formulário de autorização adicionando uma animação ao botão "Log in". Siga estas etapas:

  1. Especificar o valor correto para a propriedade animation-name, utilizando as mudanças de estado predefinidas na regra @keyframes com o nome colorChange.
  2. Definir a função de tempo como linear para garantir uma velocidade consistente durante toda a animação.
  3. Definir a duração da animação para 6000ms.
  4. Configurar a animação para repetir infinite vezes, proporcionando um efeito contínuo.
index.html

index.html

index.css

index.css

copy
  1. Atribuir o nome da regra @keyframes como valor para a propriedade animation-name.
  2. Especificar linear como valor para a propriedade animation-timing-function para garantir uma velocidade constante.
  3. Definir a propriedade animation-duration como 6000ms para determinar a duração da animação.
  4. Utilizar infinite como valor para a propriedade animation-iteration-count para repetir a animação indefinidamente.
index.html

index.html

index.css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

What should the CSS code look like for the "Log in" button animation?

Can you explain how the @keyframes rule named colorChange should be defined?

Where exactly should I add these animation properties in my CSS?

Awesome!

Completion rate improved to 2.04

bookDesafio: Implementar Animação CSS

Deslize para mostrar o menu

Tarefa

Aprimorar o apelo visual do formulário de autorização adicionando uma animação ao botão "Log in". Siga estas etapas:

  1. Especificar o valor correto para a propriedade animation-name, utilizando as mudanças de estado predefinidas na regra @keyframes com o nome colorChange.
  2. Definir a função de tempo como linear para garantir uma velocidade consistente durante toda a animação.
  3. Definir a duração da animação para 6000ms.
  4. Configurar a animação para repetir infinite vezes, proporcionando um efeito contínuo.
index.html

index.html

index.css

index.css

copy
  1. Atribuir o nome da regra @keyframes como valor para a propriedade animation-name.
  2. Especificar linear como valor para a propriedade animation-timing-function para garantir uma velocidade constante.
  3. Definir a propriedade animation-duration como 6000ms para determinar a duração da animação.
  4. Utilizar infinite como valor para a propriedade animation-iteration-count para repetir a animação indefinidamente.
index.html

index.html

index.css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 6
some-alt