0% acharam este documento útil (0 voto)

6 visualizações3 páginas

Animações CSS com @keyframes: Guia Completo

@keyframes é uma regra CSS que permite criar animações definindo estados ao longo do tempo. O e-book aborda a sintaxe, propriedades da animação, exemplos práticos, interatividade com JavaScript e oferece um mini-curso com exercícios. Dicas avançadas também são fornecidas para aprimorar a utilização de animações em projetos.

Enviado por

Matheus Ceciliano Duarte

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

6 visualizações3 páginas

Animações CSS com @keyframes: Guia Completo

Enviado por

Matheus Ceciliano Duarte

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

E-book Completo: Dominando Animações com @keyframes no CSS

Capítulo 1: Introdução ao @keyframes

O que é @keyframes?

@keyframes é uma regra CSS usada para criar animações ao definir o estado inicial,
intermediário e final de uma propriedade ao longo do tempo.

Sintaxe Básica

@keyframes nome-da-animacao {

0% { propriedade: valor; }

50% { propriedade: valor; }

100% { propriedade: valor; }

Como usar:

.elemento {

animation: nome-da-animacao 2s infinite;

Capítulo 2: Propriedades da Animação

 animation-name: nome do @keyframes

 animation-duration: duração da animação

 animation-timing-function: ritmo (ease, linear, ease-in, ease-out, etc.)

 animation-delay: atraso antes de começar

 animation-iteration-count: número de repetições (ou infinite)

 animation-direction: normal, reverse, alternate

 animation-fill-mode: forwards, backwards, both, none

Capítulo 3: Exemplos Práticos Lado a Lado

1. Fade In

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

2. Slide para Direita

@keyframes slideRight {
from { transform: translateX(0); }

to { transform: translateX(200px); }

3. Pulso

@keyframes pulse {

0%, 100% { transform: scale(1); }

50% { transform: scale(1.2); }

4. Rotacionar

@keyframes girar {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

Capítulo 4: Interatividade com JavaScript

Com JavaScript, você pode:

 Ativar animações ao clicar

 Alternar classes com animações

 Controlar tempo, direção e repetição dinamicamente

Exemplo:

<button onclick="animar()">Animar</button>

function animar() {

[Link]('caixa').[Link]('animado');

</script>

<style>

#caixa {

width: 100px; height: 100px; background: red;

}

.animado {

animation: girar 1s linear infinite;

</style>

Capítulo 5: Mini-Curso com Exercícios

Aula 1: Criando Animações Simples

 Crie uma animação que muda a cor de um elemento

 Adicione um botão que inicia a animação

Aula 2: Aplicando @keyframes com Transform

 Faça um elemento deslizar da esquerda para a direita

 Crie um efeito de zoom com pulse

Aula 3: Misturando com JavaScript

 Crie um menu que aparece com fadeIn

 Faça um card girar ao clicar

Aula 4: Projeto Final

 Interface com vários cards animados

 Interação ao passar o mouse e ao clicar

Capítulo 6: Dicas Avançadas

 Use steps() para animações em estágios

 Combine animation-delay com nth-child para animações em cascata

 Animações com variáveis CSS (--var)

Conclusão

@keyframes é uma poderosa ferramenta de estilização visual. Com criatividade e boas práticas,
você pode transformar uma interface em algo dinâmico e envolvente.

Este e-book continuará a ser atualizado com mais aulas, projetos e desafios.

Animações CSS com @keyframes: Guia Completo

Enviado por

Animações CSS com @keyframes: Guia Completo

Enviado por

E-book Completo: Dominando Animações com @keyframes no CSS

Capítulo 1: Introdução ao @keyframes

50% { propriedade: valor; }

100% { propriedade: valor; }

animation: nome-da-animacao 2s infinite;

Capítulo 2: Propriedades da Animação

 animation-name: nome do @keyframes

 animation-duration: duração da animação

 animation-timing-function: ritmo (ease, linear, ease-in, ease-out, etc.)

 animation-delay: atraso antes de começar

 animation-iteration-count: número de repetições (ou infinite)

 animation-direction: normal, reverse, alternate

 animation-fill-mode: forwards, backwards, both, none

Capítulo 3: Exemplos Práticos Lado a Lado

2. Slide para Direita

0%, 100% { transform: scale(1); }

50% { transform: scale(1.2); }

from { transform: rotate(0deg); }

Capítulo 4: Interatividade com JavaScript

Com JavaScript, você pode:

 Ativar animações ao clicar

 Alternar classes com animações

 Controlar tempo, direção e repetição dinamicamente

width: 100px; height: 100px; background: red;

animation: girar 1s linear infinite;

Capítulo 5: Mini-Curso com Exercícios

Aula 1: Criando Animações Simples

 Crie uma animação que muda a cor de um elemento

 Adicione um botão que inicia a animação

Aula 2: Aplicando @keyframes com Transform

 Faça um elemento deslizar da esquerda para a direita

 Crie um efeito de zoom com pulse

Aula 3: Misturando com JavaScript

 Crie um menu que aparece com fadeIn

 Faça um card girar ao clicar

Aula 4: Projeto Final

 Interface com vários cards animados

 Interação ao passar o mouse e ao clicar

Capítulo 6: Dicas Avançadas

 Use steps() para animações em estágios

 Combine animation-delay com nth-child para animações em cascata

 Animações com variáveis CSS (--var)

Você também pode gostar