Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Challenge: Implement CSS Animation | Advanced CSS Animations
Advanced CSS Techniques

bookChallenge: Implement CSS Animation

Task

Enhance the visual appeal of the authorization form by adding an animation to the "Log in" button. Follow these steps:

  1. Specify the correct value for the animation-name property, using the preset state changes defined in the @keyframes rule with the name colorChange.
  2. Set the time function to linear to ensure a consistent speed throughout the animation.
  3. Define a duration for the animation to last 6000ms.
  4. Configure the animation to repeat infinite times for a continuous effect.
index.html

index.html

index.css

index.css

copy
  1. Assign the name of the @keyframes rule as the value for the animation-name property.
  2. Specify linear as the value for the animation-timing-function property to ensure a consistent speed.
  3. Set the animation-duration property to 6000ms to determine the duration of the animation.
  4. Use infinite as the value for the animation-iteration-count property to repeat the animation indefinitely.
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

bookChallenge: Implement CSS Animation

Task

Enhance the visual appeal of the authorization form by adding an animation to the "Log in" button. Follow these steps:

  1. Specify the correct value for the animation-name property, using the preset state changes defined in the @keyframes rule with the name colorChange.
  2. Set the time function to linear to ensure a consistent speed throughout the animation.
  3. Define a duration for the animation to last 6000ms.
  4. Configure the animation to repeat infinite times for a continuous effect.
index.html

index.html

index.css

index.css

copy
  1. Assign the name of the @keyframes rule as the value for the animation-name property.
  2. Specify linear as the value for the animation-timing-function property to ensure a consistent speed.
  3. Set the animation-duration property to 6000ms to determine the duration of the animation.
  4. Use infinite as the value for the animation-iteration-count property to repeat the animation indefinitely.
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