# Animações CSS
## Pseudo Classes
Pseudo-classes em CSS são seletores que permitem selecionar elementos com base em um estado específico ou uma condição especial. Eles são adicionados aos seletores para aplicar estilos a elementos que estejam em um determinado estado.
### **hover**
Seleciona um elemento quando o cursor do mouse está sobre ele. É útil para aplicar estilos quando o usuário passa o mouse sobre um elemento.
### **active**
Seleciona um elemento quando está sendo clicado. É útil para aplicar estilos temporários a um elemento enquanto o usuário está interagindo com ele
### **focus, focus-within**
Seleciona um elemento que está atualmente em foco. É usado principalmente em elementos interativos, como campos de entrada (input) ou botões, para aplicar estilos quando o usuário está interagindo com o elemento.
- **focus-within**: Serve para estilizar um elemento que está focado e seus descendentes. Exemplo: label:focus-within -> ao clicar no input da label(label nao possui foco) ele altera o estilo.
### **target**
A pseudo-classe :target é usada em CSS para selecionar um elemento HTML que é o alvo de um link dentro da mesma página. Ela é ativada quando um link âncora (por exemplo, **`<a href="#id-do-elemento">`**) leva o navegador para uma parte específica da página que possui um ID correspondente. Essa pseudo-classe é útil para destacar visualmente a seção da página para a qual o usuário navegou. Por exemplo, você pode usar o :target para alterar a cor de fundo ou aplicar outros estilos aos elementos que estão sendo alvo de links dentro da mesma página.
### **link**
Usada para selecionar e estilizar links que não foram visitados pelo usuário.
### **visited**
É usada para selecionar e estilizar links que foram visitados pelo usuário. Ela é semelhante à pseudo-classe :link, mas destina-se a aplicar estilos específicos aos links que já foram acessados.
### **first-child** - **last-child**
São usados para selecionar o primeiro e o ultimo elemento filho de um elemento pai permitindo estilizar de forma especifica.
### **nth-child**
usada para selecionar elementos com base em sua posição relativa em relação aos seus elementos irmãos dentro do mesmo elemento pai. Ela permite selecionar um elemento específico com base em um número específico ou em uma fórmula matemática.
* Selecionar o terceiro elemento de um tipo específico:
```css
p:nth-child(3) {
color: red;
}
```
* Selecionar elementos **pares (even)** ou **ímpares (odd)**:
```css
li:nth-child(even) {
background-color: lightgray;
}
li:nth-child(odd) {
background-color: white;
}
```
* Selecionar elementos com base em uma fórmula matemática:
Considere cada elemento como **n**. Passando como parametro **n**, é selecionado todo os elementos de forma subsequente. Ao multiplicar irá selecionar todo elemento **n** que seja multiplo daquele número e ao somar ou subtrair elementos que estejam a frente ou atrás de **n**
```css
div:nth-child(3n+1) {
font-weight: bold;
}
```
### **enabled** - **disabled**
As pseudo-classes :enabled e :disabled são usadas para selecionar elementos que estão habilitados (ativos) ou desabilitados (inativos), respectivamente. Elas são comumente usadas em formulários para estilizar elementos interativos, como campos de entrada (input), botões e caixas de seleção, com base em seu estado de habilitação.
```css
<input disabled type="text">
<input type="text">
<input type="text">
<input type="text">
```
```css
div input{
border: 2px solid red;
}
input:disabled {
border: none;
background-color: gray;
color: white;
cursor: not-allowed;
}
```
### **invalid** - **valid**
A pseudo-classe **:invalid** é aplicada a elementos de formulário que não passaram na validação. Geralmente, é usado para realçar visualmente os campos de entrada (inputs) que contêm dados inválidos ou que não atendem aos critérios de validação especificados. Já a pseudo-classe **:valid** é aplicada a elementos de formulário que passaram na validação. É usada para estilizar campos de entrada (inputs) que contêm dados válidos ou que atendem aos critérios de validação
### **in-range - out-of-range**
As pseudo-classes :in-range e :out-of-range são utilizadas em CSS para estilizar elementos de um formulário com base nos valores que estão dentro ou fora de um intervalo específico.
**:in-range**: Esta pseudo-classe é aplicada a elementos de formulário (como **`<input>`** ou **`<select>`**) quando seus valores estão dentro do intervalo especificado pelos atributos min e max.
**:out-of-range**: Por outro lado, esta pseudo-classe é aplicada a elementos de formulário quando seus valores estão fora do intervalo especificado pelos atributos min e max.
### **required - optional**
A pseudo-classe **:required** é usada para selecionar elementos de formulário que possuem o atributo required definido. Essa pseudo-classe permite estilizar campos de entrada (inputs) ou outros elementos obrigatórios em um formulário.
Por exemplo, se você tiver um campo de entrada **<input>** que seja obrigatório, você pode usar a pseudo-classe **:required**
Já a pseudo-classe :optional é utilizada em CSS para selecionar elementos de formulário que não possuem o atributo required. Em outras palavras, ela seleciona elementos de formulário que não são obrigatórios de serem preenchidos pelo usuário.
### **checked**
A pseudo-classe **:checked** é usada em CSS para selecionar elementos de formulário que estão marcados ou selecionados. Ela é comumente usada em elementos como checkboxes **(<input type="checkbox">)** e radio buttons **(<input type="radio">).**
Quando um elemento de formulário é marcado ou selecionado, a pseudo-classe **:checked** pode ser usada para estilizar esse elemento ou aplicar estilos aos elementos relacionados.
```css
input{
width: 20px;
height: 20px;
}
input:checked{
width: 50px;
height: 50px;
transition: width 500ms;
background-color: lightgreen;
}
```
### **-webkit-autofill**
Autofill é uma funcionalidade presente em muitos navegadores da web e em formulários online, onde o navegador sugere ou preenche automaticamente campos de formulários com informações previamente inseridas pelo usuário. Isso pode incluir informações como nome, endereço de e-mail, endereço residencial, número de telefone e outros dados comuns.
usando essa pseudo classe, fica visivel para o usuário que aquele campo foi preenchido de forma automática.
### **is**
A função :is() permite agrupar uma lista de seletores CSS em um único argumento, o que pode ser útil para simplificar a escrita de seletores complexos ou repetidos. Além disso evita a quebra do codigo no caso de um seletor invalido.
Por exemplo, no cado de aplicar estilos a diferentes tipos de elementos, como parágrafos, títulos e listas da mesma tag pai.
```css
.container :is(p, h1, ul){
color: blue;
}
```
- Outra formas de usar:
```css
:is(section, aside, nav) p {
color: red;
}
/*Nesse caso são 3 tags diferentes porém a tag p de cada um recebe o estilo*/
```
### **not**
A pseudo-classe :not() em CSS é usada para selecionar elementos que não correspondem a um determinado seletor. Ela permite aplicar estilos a elementos que não atendem a certos critérios de seleção.
Por exemplo, se você deseja estilizar todos os parágrafos exceto aqueles que possuem a classe "destaque", você pode usar a pseudo-classe :not() da seguinte maneira:
```css
p:not(.destaque) {
font-size: 14px;
color: #333;
}
```
## Pseudo Elementos
Usados para adicionar elementos extras na página, sem a necessidade de declará-lo no HTML, ou para selecionar uma parte de algum elemento.
### **First Letter**
Seleciona e aplica um estilo à letra da primeira linha de uma tag
```css
p::first-letter{
/*color, background, margin, padding, border,
font, propriedade de texto*/
}
```
### **First Line**
Seleciona e aplica um estilo à primeira linha de um texto
```css
p::first-line{
/*color, background, font, propriedade de texto*/
}
```
### **Backdrop**
Estiliza o plano de fundo de elementos em modo tela cheia como `dialog` e `video`
```css
video::backdrop{
background-color: blue;
}
```
**4. Marker**
Permite estilizar os tópicos ou números de uma lista (li) ou então a flecha de um elemento sumary
```css
/*color, content, white-space, font, animation, transition*/
summary::marker{
content: "→";
color: red;
}
li::marker{
color: blueviolet;
content: "↑";
}
```
### **Place-Holder**
Estiliza o placeholder de campos de input.
```css
input::placeholder{
/*color, background, font, propriedade de texto*/
}
```
### **Selection**
Estiliza a seleção de texto do navegador.
```css
/*color, background, text*/
*::selection{
background-color: #FFA500;
color: white;
}
```
### **Before e After**
As pseudo-classes **:before** e **:after** são usadas em CSS para adicionar conteúdo antes ou depois do conteúdo real de um elemento, respectivamente. Elas são frequentemente usadas em conjunto com a propriedade content para inserir elementos ou texto adicionais no fluxo do documento, sem a necessidade de modificação direta do HTML.
- Usado também para estilizar imagens com um efeito por cima.
```css
/* Exemplo 1: Adicionar um elemento antes do conteúdo */
p::before {
content: "before";
}
/* Exemplo 2: Adicionar um elemento depois do conteúdo */
p::after {
content: " after";
}
```
**É importante mencionar que as pseudo-classes :before e :after criam elementos virtuais e não afetam a estrutura do DOM. Isso significa que eles são apenas renderizados no estilo, mas não são elementos reais que podem ser selecionados ou manipulados com JavaScript.**
# Transições e Animações
As animações em CSS permitem criar efeitos visuais mais complexos e sofisticados, oferecendo controle total sobre o movimento, transformação e transições de elementos em uma página da web. As animações são definidas por meio da propriedade CSS @keyframes juntamente com outras propriedades como transition, animation etc.
Podemos categorizar em 3 tipos:
**Animação funcional**:
As animações funcionais são aquelas que têm um propósito claro e prático, ajudando os usuários a compreenderem melhor a interação ou o fluxo de informações. Elas são projetadas para melhorar a usabilidade e a eficiência da interface, transmitindo informações de forma clara e facilitando a realização de tarefas. Exemplos de animações funcionais incluem transições suaves entre estados de um elemento, feedback visual durante o carregamento de conteúdo ou ações de arrastar e soltar que fornecem indicações visuais claras.
**Animação material**:
As animações materiais seguem as diretrizes de design do Material Design, um conjunto de princípios de design criados pelo Google. Essas animações são caracterizadas por movimentos suaves e realistas, que se assemelham à forma como os objetos se comportam no mundo físico. Elas visam criar uma experiência de usuário intuitiva e consistente, com transições fluídas e respostas visuais naturais. As animações materiais são frequentemente usadas em elementos como botões, menus, cards e transições entre telas.
**Animação encantadora**:
As animações encantadoras são aquelas que têm como objetivo encantar e surpreender os usuários, proporcionando uma experiência visualmente agradável e envolvente. Elas são projetadas para despertar emoções positivas e criar um senso de encantamento e magia na interação do usuário com a interface. Isso pode incluir animações lúdicas, transições criativas, efeitos visuais cativantes ou elementos interativos inesperados. As animações encantadoras são frequentemente usadas em sites ou aplicativos com um estilo mais artístico, criativo ou voltado para o entretenimento.
Esses três tipos de animação - funcional, material e encantadora - podem ser usados individualmente ou combinados, dependendo do objetivo, do contexto e do estilo de design desejado.
## Transformações 2D
### Transform
A propriedade CSS transform permite aplicar transformações geométricas a elementos HTML, como rotação, escala, translação e deformação. Ela é amplamente utilizada para criar efeitos visuais, animações e ajustes de layout de forma mais flexível e eficiente.
Sintaxe: **transform: valor;**
#### **Rotação (rotate)**:
A rotação permite girar um elemento em torno de um ponto de referência. O valor rotate é especificado em graus.
```css
transform: rotate(45deg);
```
#### **Translação (translate)**:
A translação permite mover um elemento em relação à sua posição original. O valor translate é especificado em pixels (px) ou em porcentagem (%).
Além disso é possivel fazer a translação apenas no eixo x **(translateX())** ou no eixo Y **(translateY())**
```css
transform: translate(250px, -110px);
```
#### **Escala (scale)**:
A escala permite aumentar ou diminuir o tamanho de um elemento. O valor scale é um número decimal, onde 1 mantém o tamanho original, 2 duplica o tamanho e 0.5 reduz pela metade e por ai vai.
Além disso é possivel fazer a escala apenas no eixo x **(scaleX())** ou no eixo Y **(scaleY())**
```css
#fla1{
transform: scale(1.5);
}
#fla2{
transform: scale(0.5);
}
```
#### **Deformação (skew)**:
A deformação permite distorcer/inclincar um elemento em relação aos seus eixos horizontal e vertical. O valor skew é especificado em graus.
```css
#fla1{
transform: skew(15deg);
}
#fla2{
transform: skew(50deg);
}
#fla3{
transform: skew(-40deg);
}
```
#### **matrix()**
Compilado das funções anteriores
```
/* scaleX(), skewX(), skewY(), scaleY(), translateX(), translateY()*/
transform: matrix(1,0,0,1,0,0)
```
## Animação
### Transition
A propriedade CSS **transition** permite animar as mudanças de propriedades de um elemento ao longo do tempo. Ela oferece uma maneira fácil de criar transições suaves entre diferentes estados de estilo.
**Sintaxe:**
**transition: propriedade, duração, função-timing, atraso;**
* A **propriedade (property)** define qual propriedade CSS será animada. Por exemplo, transition: color animará as mudanças de cor do elemento.
* A **duração (duration)** especifica o tempo necessário para completar a transição. Pode ser definida em segundos (s) ou milissegundos (ms). Por exemplo, transition: 1s indica uma duração de 1 segundo.
* A **função de timing (timing-function)** controla a aceleração da transição. Ela define como o valor da propriedade é alterado ao longo do tempo. Parâmetro são [⬇️](#ancora):
* O **atraso (delay)** define o tempo antes que a transição comece. Pode ser definido em segundos (s) ou milissegundos (ms).
<a id="ancora"></a>
#### Timing-function:
A propriedade transition-timing-function em CSS é usada para controlar como uma transição de propriedade ocorre ao longo do tempo.
* **ease (padrão)**: Esta é a função de tempo padrão. Ela começa devagar, acelera no meio da transição e diminui a velocidade no final. É uma transição suave e gradual.
* **linear**: Essa função de tempo cria uma transição linear, onde o elemento se move com a mesma velocidade do início ao fim da transição. Não há aceleração ou desaceleração.
* **ease-in**: Essa função de tempo faz o elemento começar devagar e acelerar à medida que a transição progride. É uma transição suave, com uma sensação de aceleração gradual.
* **ease-out**: Essa função de tempo faz o elemento iniciar com uma velocidade constante e, em seguida, desacelerar lentamente à medida que a transição se aproxima do fim. É uma transição suave, com uma sensação de desaceleração gradual.
* **ease-in-out**: Essa função de tempo combina a suavidade do ease-in no início e a suavidade do ease-out no final da transição. Ela acelera no início, desacelera no final e tem uma transição suave no meio.
Você também pode criar sua própria função de tempo personalizada usando a sintaxe **cubic-bezier()**. Essa função permite definir pontos de controle para controlar a curva de transição. Os valores para cubic-bezier() variam de 0 a 1
```css
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
```
### Keyframe
As keyframes em CSS são usadas para criar animações personalizadas, permitindo definir uma série de etapas intermediárias entre o estado inicial e final de um elemento. Elas são usadas juntamente com a propriedade **animation** para controlar o comportamento da animação.
**Sintaxe:**
```css
@keyframes nome-da-animacao {
/* Definição das etapas intermediárias */
}
```
Dentro das chaves {}, você define as etapas intermediárias da animação, especificando o estado do elemento em diferentes momentos ao longo da animação. Cada etapa é definida com um **percentual ou palavra-chave** que representa o progresso da animação.
```css
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
```
Nos momentos inicial (0%) e final (100%) também pode ser usado as palavras chaves **from** e **to** respectivamente.
Depois de definir os keyframes, você pode aplicar a animação a um elemento usando a propriedade **animation**
```css
.elemento {
animation-name: fade-in;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
```
## Animation
A propriedade CSS **animation** é usada para aplicar animações a elementos HTML. Ela combina várias propriedades relacionadas à animação em uma única declaração, facilitando o controle e a configuração de animações complexas.
**Sintaxe:**
```css
animation: nome-da-animacao duração [funcao-tempo] [atraso]
[iteracao] [direcao] [preenchimento] [estado-final];
```
**animation-name**:
Especifica o nome da animação definida pelos keyframes (@keyframes). É necessário definir os keyframes correspondentes usando a regra @keyframes antes de usar o nome da animação.
**animation-duration**:
Define a duração da animação em segundos (s) ou milissegundos (ms).
**animation-timing-function (opcional)**:
Define a função de tempo da animação, que controla a velocidade e a progressão da animação. Alguns valores comuns são linear, ease, ease-in, ease-out, ease-in-out e cubic-bezier(). A função de tempo controla a taxa de variação das propriedades ao longo do tempo.
Dentro de timing-function temos também a propriedade steps. Ela permite criar animações com uma aparência de transição discreta e por etapas, em vez de uma transição suave e contínua. Basicamente um stop-motion
```css
steps(numero-de-etapas, direcao)
```
* **numero-de-etapas**: Especifica o número de etapas que a animação terá. Pode ser um número inteiro maior que zero.
* **direcao**: Define a direção em que a animação progride. Os valores válidos são start (avança de forma progressiva) e end (avança retrocedendo).
**animation-delay (opcional)**:
Especifica um atraso antes de iniciar a animação. Pode ser definido em segundos (s) ou milissegundos (ms).
**animation-iteration-count (opcional)**:
Define o número de vezes que a animação deve se repetir. Valores comuns incluem **infinite** (repetição infinita) ou um **número inteiro** que representa a quantidade de vezes que a animação deve ocorrer.
**animation-direction (opcional)**:
Especifica a direção da animação. Valores comuns incluem:
* **normal** (direção padrão),
* **reverse** (direção reversa),
* **alternate** (uma repetição avança e outra retrocede)
* **alternate-reverse** (uma repetição retrocede e outra avança).
**animation-fill-mode (opcional)**:
Define como o elemento é estilizado antes e depois da animação. Valores comuns incluem:
* **none** (nenhum estilo aplicado)
* **forwards** (elemento mantém o estilo do estado final)
* **backwards** (elemento recebe o estilo do estado inicial).
**animation-play-state (opcional)**:
controla o estado de reprodução de uma animação. Ela permite pausar, retomar ou definir uma animação em um estado específico.
* **running (padrão)**:
Indica que a animação está em execução normal. A animação continua a ser reproduzida a partir de onde parou ou do início, caso ainda não tenha começado.
* **paused**:
Indica que a animação está em pausa. A reprodução da animação é interrompida no estado em que se encontra no momento da pausa.
Sign in with Wallet
Connect another wallet