Articles
Introdução ao CSS
Propriedades CSS Relacionadas à Animação

Propriedades CSS Relacionadas à Animação

Este artigo explica as propriedades CSS relacionadas à animação.

Você pode aprender sobre o uso e a sintaxe das propriedades @keyframes, animation e transition.

YouTube Video

HTML para Visualização

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Animação e Transição

Regra @keyframes 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes é usado em animações CSS para especificar como os estilos mudam durante a animação. No @keyframes, as mudanças de estilo do início ao fim da animação são especificadas por porcentagens de tempo ou palavras-chave (from e to).

  • Este é um exemplo de uma animação em que um elemento desliza da esquerda para a direita e retorna à sua posição original.
  • Neste exemplo, slide é escrito após @keyframes, definindo uma animação chamada slide.
  • 0% é o início da animação, com translateX(0) posicionando o elemento em sua localização original.
  • 50% é o meio da animação, onde o elemento se move 200px para a direita usando translateX(200px).
  • 100% é o fim da animação, com o elemento retornando à sua posição original.
  • Na classe box-animation-slide, a propriedade animation é usada para aplicar a animação slide em intervalos de 3 segundos.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Você pode controlar detalhadamente os estilos durante uma animação. Ao especificar porcentagens, você pode aplicar diferentes estilos em momentos arbitrários.
    • Neste exemplo, a cor muda gradualmente de vermelho para azul, depois para verde, depois para amarelo e volta para vermelho.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • Neste exemplo, from é equivalente a 0% e to é equivalente a 100%. Isso permite que você defina animações simples.

Sintaxe Básica 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: O nome da animação. Isso é especificado usando a propriedade animation ou a propriedade animation-name.
  • Porcentagens ou Palavras-chave: Use porcentagens de 0% a 100%, ou as palavras-chave from (equivalente a 0%) e to (equivalente a 100%).

Propriedade animation 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

A propriedade animation é usada para aplicar animações a um elemento. As animações definem como um conjunto de estilos CSS muda ao longo do tempo. Com a propriedade animation, você pode controlar o tempo, comportamento, atraso, número de repetições e mais de uma animação.

  • A classe box-animation-ease-in-out especifica slide como o animation-name e usa a animação slide definida em @keyframes.
    • 3s é a animation-duration, o que significa que cada ciclo da animação se completa em 3 segundos.
    • ease-in-out é a animation-timing-function, o que faz com que a animação comece lentamente, acelere e depois desacelere novamente no final.
    • infinite é o animation-iteration-count, o que significa que a animação se repetirá indefinidamente.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • A classe box-animation-alternate especifica color-change como o animation-name e usa a animação color-change definida em @keyframes.
    • 1s após ease-in-out é o animation-delay, especificando o atraso antes do início da animação. A animação começará 1 segundo depois.
    • 3 após 1s é o animation-iteration-count, o que significa que a animação se repete 3 vezes.
    • alternate é a animation-direction, especificando a direção da reprodução da animação. O alternate especifica que a animação reproduz alternadamente.

Composição da Propriedade animation.

A propriedade animation é uma propriedade abreviada que combina várias subpropriedades em uma só. Aqui estão as principais subpropriedades:.

  • Propriedade animation-name: Especifica o nome da animação a ser aplicada. Ele deve corresponder ao nome da animação definida em @keyframes.
  • Propriedade animation-duration: Especifica o tempo necessário para a animação completar um ciclo. As unidades de tempo são segundos (s) ou milissegundos (ms).
  • Propriedade animation-timing-function: Especifica a curva de velocidade da animação. Valores como ease, linear, ease-in, ease-out, ease-in-out, etc., são usados.
    • Especificar ease faz com que a animação comece lentamente, acelere e depois desacelere novamente no final.
    • Especificar linear faz com que a animação progrida a uma velocidade constante do início ao fim.
    • Especificar ease-in inicia a animação lentamente e termina rapidamente.
    • Especificar ease-out inicia a animação rapidamente e termina lentamente.
    • Especificar ease-in-out inicia lentamente, progride rapidamente e termina lentamente.
  • A propriedade animation-delay especifica o atraso antes do início da animação. A unidade de tempo pode ser segundos ou milissegundos.
  • A propriedade animation-iteration-count especifica o número de vezes que a animação deve se repetir. Especificar infinite fará com que a animação se repita indefinidamente.
  • A propriedade animation-direction especifica a direção da reprodução da animação. As opções incluem normal (direção normal), reverse (direção reversa), alternate (reproduzir alternadamente) e alternate-reverse (reproduzir alternadamente começando na direção reversa).
  • A propriedade animation-fill-mode especifica o estado da animação antes de começar e depois de terminar. Você pode especificar none, forwards, backwards ou both.
  • A propriedade animation-play-state especifica se a animação está em execução ou pausada. Você pode especificar running ou paused.

Resumo

A propriedade animation é uma ferramenta poderosa para alterar dinamicamente o estilo dos elementos. Usando @keyframes, você pode definir como os estilos mudam ao longo do tempo e controlar o comportamento detalhado da animação com cada subpropriedade de animation.

Propriedade transition 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

A propriedade transition é usada para aplicar efeitos de animação às alterações de estilo CSS. Ela permite que as alterações apareçam suavemente durante mudanças de estado, como hover, focus, active ou quando estilos são alterados dinamicamente por JavaScript.

Vamos examinar um exemplo da classe transition-box em que a cor de fundo muda suavemente ao passar o mouse sobre um botão. - Na classe transition-box, a propriedade transition aplica uma transição de 2 segundos à mudança de cor de fundo. A mudança é especificada como ease, tornando-a suave. - A pseudo-classe hover muda a cor de fundo de lightgray para steelblue quando o mouse passa sobre o botão. Essa mudança ocorre suavemente ao longo dos 2 segundos especificados na classe transition-box.

É possível aplicar transition a várias propriedades simultaneamente. - No exemplo da classe transition-2-properties, a cor de fundo muda em 5 segundos e a largura muda em 0,5 segundos.

Sintaxe Básica 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • A propriedade property especifica a quais propriedades CSS a animação deve ser aplicada. Especificar all aplica a animação a todas as propriedades.
  • A propriedade duration especifica o tempo que a animação leva para ser concluída. Especifique usando segundos (s) ou milissegundos (ms).
  • A propriedade timing-function especifica a mudança na velocidade da animação. Você pode usar opções como ease, linear, ease-in, ease-out, ease-in-out, etc.
  • A propriedade delay especifica o tempo de atraso antes do início da animação. Especifique em segundos ou milissegundos.

Propriedades detalhadas de transition 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

A propriedade transition também pode ser usada como propriedades individuais, da seguinte forma.

  • transition-property: Especifica a propriedade à qual a animação será aplicada.
  • transition-duration: Especifica o tempo até a animação ser concluída.
  • transition-timing-function: Especifica a velocidade de progressão da animação. Podem ser usadas opções como ease, linear, ease-in, ease-out, ease-in-out.
  • transition-delay: Especifica o tempo de atraso antes do início da animação.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Propriedades CSS Relacionadas a Efeitos de Filtro