Curso IT Fundamentos CSS 027_Animação e Transição

Animação

Animações CSS são efeitos que podem ser usados para alterar gradualmente os valores das propriedades dos elementos. As animações podem ser aplicadas a qualquer propriedade CSS, incluindo largura, altura, cor, fundo, borda, etc.

A sintaxe da propriedade animation é a seguinte:

• name: Especifica o nome da animação.
• duration: Especifica a duração da animação.
• timing-function: Especifica a curva de velocidade da animação.
• delay: Especifica o atraso da animação.
• iteration-count: Especifica o número de reproduções da animação.
• direction: Especifica a direção de reprodução da animação.
• fill-mode: Especifica o estilo do elemento após a conclusão da animação ou quando ela é pausada ou parada.

Exemplo:

1
    @keyframes animationName{
2
    from {
3
        transform: rotate(0deg);
4
      }
5
      to {
6
        transform: rotate(360deg);
7
        }
8
    }
9
    .example1{
10
    width: 100px;
11
      height: 100px;
12
      background-color: #3498db;
13
      animation: animationName 2s linear infinite; /* Aplicar animação, duração 2 segundos, loop infinito, transição linear */
14
  }

1
    <div class="example1"></div>

Efeito:

• @keyframes rotate define uma animação de keyframes chamada rotate, do estado inicial (rotação de 0 graus) ao estado final (rotação de 360 graus).
• O elemento .animated-box aplica esta animação, especificando o nome da animação, duração, tipo de loop, etc. através da propriedade animation.

Animações CSS e transições CSS são ambos efeitos que podem alterar gradualmente os valores das propriedades dos elementos. As principais diferenças são:

• As animações podem ser reproduzidas repetidamente, enquanto as transições são reproduzidas apenas uma vez.
• As animações podem especificar a direção de reprodução, as transições não.
• As animações podem especificar o estilo do elemento após a conclusão ou ao pausar/parar, as transições não.

Transição

Transições CSS são efeitos que podem alterar gradualmente os valores das propriedades dos elementos. As transições podem ser aplicadas a qualquer propriedade CSS, incluindo largura, altura, cor, fundo, borda, etc. O efeito de transição pode variar dependendo do navegador e do dispositivo, o desempenho pode variar dependendo da complexidade da transição.

Exemplo:

1
    .example1{
2
        width: 200px;
3
        height: 200px;
4
        background-color: #3498db;
5
        transition: background-color 0.5s ease; /* Definir propriedade e tempo de transição */
6
        }
7
    .example1:hover{
8
        background-color: #e74c3c;
9
        }

1
    <div class="example1"></div>

Efeito: