Animações e Transições

As animações e transições são recursos do CSS que permitem adicionar movimento e interatividade a elementos HTML em uma página da web. As animações são usadas para criar mudanças visuais complexas, enquanto as transições são usadas para criar efeitos de transição mais simples entre estados.

As transições permitem que um elemento mude de um estado para outro com uma animação suave, em resposta a um evento do usuário, como passar o mouse sobre o elemento ou clicar nele. As transições são definidas usando a propriedade CSS transition, que especifica a propriedade a ser animada, a duração da animação e o tipo de transição. Por exemplo, para fazer a cor de fundo de um botão mudar suavemente quando o mouse passa sobre ele, você pode usar o seguinte código CSS:

    button {
        background-color: blue;
        transition: background-color 0.5s ease;
        }
    button:hover {
        background-color: red;
        }

Este código especifica que a transição será aplicada à propriedade de cor de fundo do botão, que a duração da animação será de 0,5 segundos e que o tipo de transição será "ease" (suave). Quando o mouse passa sobre o botão, a cor de fundo muda suavemente de azul para vermelho em meio segundo.

As animações permitem criar efeitos mais complexos e sofisticados em elementos HTML. As animações são definidas usando a propriedade CSS animation, que especifica a chave da animação (que contém as propriedades CSS que serão animadas), a duração da animação, o número de iterações e outras opções. Por exemplo, para criar uma animação que faça uma imagem girar continuamente, você pode usar o seguinte código CSS:

    img {
        animation: spin 2s linear infinite;
        }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
        }

Este código define a animação "spin" que será aplicada a uma imagem. A animação terá uma duração de 2 segundos, será linear e girará infinitamente. A chave da animação "spin" é definida usando a regra @keyframes, que especifica como a imagem deve se mover durante a animação. Neste exemplo, a imagem gira continuamente, passando de 0 graus a 360 graus de rotação.

Em resumo, as animações e transições são recursos do CSS que permitem adicionar movimento e interatividade a elementos HTML em uma página da web. As transições são usadas para criar efeitos de transição mais simples entre estados, enquanto as animações são usadas para criar mudanças visuais mais complexas e sofisticadas.