No entanto, se estivermos construindo uma animação simples que não exija nenhuma interação do usuário, isso pode ser feito apenas com CSS.
1. Marcação com HTML
Para a estrutura de nossa página da Web, dividiremos o banner em elementos individuais que iremos animar.
1 |
|
2 |
|
3 |
|
4 |
|
5 |
Hello
|
6 |
World
|
7 |
|
8 |
|
2. Estilizando com CSS
Agora podemos estilizar o layout da nossa página. Vamos começar com os elementos estáticos, ou seja, os elementos que não precisam de nenhuma animação.
1 |
body {
|
2 |
margin: 0; |
3 |
background-color: #b1bcbf; |
4 |
} |
5 |
|
6 |
.container {
|
7 |
width: 100%; |
8 |
height: 100vh; |
9 |
position: relative; |
10 |
} |
11 |
|
12 |
.background-image {
|
13 |
width: 50%; |
14 |
position: absolute; |
15 |
top: 0; |
16 |
bottom: 0; |
17 |
left: 0; |
18 |
margin: auto; |
19 |
background-image: url("https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg");
|
20 |
background-size: cover; |
21 |
} |
Veja como está nossa página atualmente:
3. Animando com CSS
Depois de terminar nosso estilo estático, podemos passar para os elementos animados. A principal coisa a ter em mente ao trabalhar com animações CSS é monitorar o tempo de cada elemento animado para garantir que eles fluam suavemente juntos. Felizmente, você pode visualizar os detalhes de qualquer animação em uma página da Web usando o Chrome DevTools Animation Inspector. Este gráfico nos dá uma ideia clara do ponto inicial e durante cada elemento animado em nossa página da web.
Vamos dar uma olhada na linha do tempo da nossa demonstração:
Agora que temos uma ideia de como é a linha do tempo, vamos recriá-la começando com a animação em tela dividida.
O estilo inicial do elemento é definido para cobrir completamente a página:
1 |
.split-screen { |
2 |
width: 100%; |
3 |
background-color: #2c2d2b; |
4 |
position: absolute; |
5 |
right: 0; |
6 |
top: 0; |
7 |
bottom: 0; |
8 |
z-index: 2; |
9 |
}
|
Em seguida, definiremos uma nova animação usando o @keyframes propriedade.
Os quadros-chave são usados para determinar a linha do tempo de cada animação.
Por exemplo, se tivermos uma animação com duração de 2 segundos e definirmos uma opacidade de propriedade de quadro-chave: 1 em 50%, isso significa que o elemento atingirá uma opacidade de 1 em 1s. Também podemos usar o from e to palavras-chave para especificar os quadros-chave inicial e final.
Queremos definir o elemento de tela dividida para ir de 100% a 50% da largura da página.
1 |
@keyframes reduceSize { |
2 |
from { |
3 |
width: 100%; |
4 |
}
|
5 |
to { |
6 |
width: 50%; |
7 |
}
|
8 |
}
|
Atribuir os quadros-chave de animação a um elemento
Agora podemos atribuir esta animação ao split-screen elemento usando o animation-name propriedade. Também podemos controlar o tempo da animação usando o animation-duration e animation-delay propriedades. Com base no gráfico de animação acima, queremos que a animação em tela dividida comece 500ms após o carregamento da página, então daremos um atraso de 0,5s:
1 |
animation-name: reduceSize; |
2 |
animation-duration: 1.5s; |
3 |
animation-delay: 0.5s; |
Esta é a aparência da nossa animação agora (novamente, pressione Rerun para ver a animação):
Modo de preenchimento de animação
Na caneta acima, notamos que o elemento volta ao seu estado original após a animação. Podemos evitar que isso aconteça usando o animation-fill-mode propriedade. Esta propriedade nos permite controlar o estado de um elemento animado antes e depois da realização da animação.
1 |
animation-name: reduceSize; |
2 |
animation-duration: 1.5s; |
3 |
animation-delay: 0.5s; |
4 |
animation-fill-mode: forwards; |
Definindo a propriedade como forwards, estamos especificando que a animação deve manter o estado de seu último quadro-chave. Esta é a nossa animação atualizada:
Usar propriedade abreviada é ainda melhor
Podemos usar a propriedade abreviada de animação para aplicar todo o estilo de animação até agora. Agora, nosso estilo de tela dividida fica assim:
1 |
.split-screen { |
2 |
width: 100%; |
3 |
background-color: #2c2d2b; |
4 |
position: absolute; |
5 |
left: 0; |
6 |
top: 0; |
7 |
bottom: 0; |
8 |
z-index: 2; |
9 |
animation: reduceSize 1.5s 0.5s forwards; |
10 |
}
|
O valor de duração da animação deve ser colocado antes do valor de atraso da animação.
próxima animação
A próxima animação que aplicamos ao banner da tela dividida é movê-lo para a direita da tela. Definiremos uma propriedade de quadro-chave para lidar com isso:
1 |
@keyframes moveRight { |
2 |
from { |
3 |
left: 0%; |
4 |
}
|
5 |
to { |
6 |
left: 50%; |
7 |
}
|
8 |
}
|
Vamos definir o tempo da animação para começar 3s após o carregamento da página e durar um total de 1,5s. Também podemos combinar animações em CSS:
1 |
.split-screen { |
2 |
width: 100%; |
3 |
background-color: #2c2d2b; |
4 |
position: absolute; |
5 |
left: 0; |
6 |
top: 0; |
7 |
bottom: 0; |
8 |
z-index: 2; |
9 |
animation: |
10 |
reduceSize 1.5s 0.5s forwards, |
11 |
moveRight 1.5s 3s forwards; |
12 |
}
|
Animação no conteúdo da página
Em seguida, vamos animar o conteúdo da página.
Existem três animações a serem definidas para o conteúdo:
- O conteúdo aparece gradualmente enquanto desliza para cima a partir da parte inferior da página
- O conteúdo desliza para a direita
- O conteúdo altera a cor do texto de branco para uma imagem de fundo
Vamos definir os quadros-chave para cada um. Para deslizar o conteúdo para a direita, podemos reutilizar a animação moveRight já definida.
1 |
@keyframes fadeInUp { |
2 |
from { |
3 |
transform: translateY(100vh); |
4 |
opacity: 0; |
5 |
}
|
6 |
to { |
7 |
transform: translateY(0); |
8 |
opacity: 1; |
9 |
}
|
10 |
}
|
11 |
|
12 |
@keyframes changeBackground { |
13 |
to { |
14 |
background-image: url("https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg"); |
15 |
background-size: 200%; |
16 |
background-position: center; |
17 |
background-clip: text; |
18 |
-webkit-background-clip: text; |
19 |
color: transparent; |
20 |
}
|
21 |
}
|
Para o quadro-chave changeBackground, usamos o background-clip propriedade para definir a cor do texto como uma imagem de plano de fundo em vez de uma única cor.
Agora vamos estilizar o conteúdo. Como estamos trabalhando com atrasos de animação, precisaremos aplicar o quadro-chave de início da animação diretamente ao conteúdo ou isso causará um erro quando a animação começar. Dê uma olhada no que acontece se não tivermos o estilo de conteúdo inicial correspondente ao estilo de início do quadro-chave:
O conteúdo fica visível no carregamento da página antes da opacidade e transforma as propriedades no fadeInUp animação são aplicadas, então precisaremos incluir essas propriedades no estilo do conteúdo:
1 |
.content { |
2 |
color: white; |
3 |
font-size: 10vw; |
4 |
text-transform: uppercase; |
5 |
position: absolute; |
6 |
width: fit-content; |
7 |
height: fit-content; |
8 |
top: 0; |
9 |
left: 0; |
10 |
right: 0; |
11 |
bottom: 0; |
12 |
margin: auto; |
13 |
z-index: 4; |
14 |
opacity: 0; |
15 |
transform: translateY(100vh); |
16 |
animation: |
17 |
fadeInUp 2s 0.5s, |
18 |
moveRight 1.5s 3s, |
19 |
changeBackground 1.5s 3s; |
20 |
animation-fill-mode: forwards; |
21 |
}
|
Um Último Detalhe
Por fim, aplicamos uma última animação ao span contendo uma vírgula apenas por diversão:
1 |
.content .comma { |
2 |
color: #2c2d2b; |
3 |
opacity: 1; |
4 |
animation: fadeOut 0.5s forwards 2.5s; |
5 |
}
|
6 |
|
7 |
@keyframes fadeOut { |
8 |
from { |
9 |
opacity: 1; |
10 |
}
|
11 |
to { |
12 |
opacity: 0; |
13 |
}
|
14 |
}
|
Foram realizadas!
E é isso – terminamos com nosso banner animado em CSS!
