Matricule-se
Voltar para o blog
HTML e CSS

Animate Timeline CSS – Animações com Scroll

Heitor Catunda

Você já conhece a nova propriedade animate timeline do CSS? Essa propriedade vai te permitir fazer uma animação com scroll sem a necessidade de utilizar o JavaScript!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Animate Timeline CSS – Animações com Scroll

Você já viu alguma animação de scroll em algum site? Não sabe do que estou falando? Quando você entra em um site e a medida em que desce na sua barra de rolagem, nota que acontece uma animação no site.

Seja para mostrar uma imagem, um conteúdo, até mesmo para realçar alguma informação. Agora deve ter lembrado, certo?

Isso é uma animação de scroll e normalmente ela é feita usando o JavaScript, mas hoje, eu quero te mostrar animações com scroll no CSS sem o uso do JavaScript.

Para isso, nós vamos utilizar a propriedade animate timeline do CSS para construir essa animação e deixar o nosso site ainda mais visual!

Antes de iniciar, preciso te falar que nós vamos partir de um projeto já pronto para utilizar essa animação. Os arquivos estão disponíveis para download.

Mas se quiser aprender como construímos a landing page do zero, basta acessar o nosso Curso de HTML e CSS – Como Criar uma Landing Page.

Nesse curso você vai aprender a criar a página que nós vamos utilizar como exemplo nessa aula, então se quiser mais detalhes de como ela foi feita vale a pena dar uma olhada nesse conteúdo, pois está bem completo e tem muitas ferramentas que vão te ajudar na construção do seu site!

Outro ponto importante, como vamos trabalhar com animações, é interessante que você já tenha uma noção do assunto! Se ainda não tiver, pode acessar o nosso conteúdo de Animações no CSS.

Isso já vai te dar uma base e você não vai ficar perdido!

Animação em CSS

O CSS é a estilização de uma página, então a animação em CSS nada mais é do que a animação dessa estilização. Seja para visualizar algum conteúdo, para realçar, para dar brilho, para criar movimento.

Existem uma série de animações que vão deixar o seu projeto mais profissional, ao invés de uma página totalmente estática.

Isso é importante para que sua página fique dinâmica e para que o usuário consiga perceber isso, principalmente se você está criando uma animação para chamar atenção para um detalhe, uma informação importante ou até mesmo para um botão na sua página.

5 Motivos para usar animações em CSS

  • Melhora a experiência do usuário
  • Guia a atenção do usuário
  • Aumenta o engajamento
  • Desempenho otimizado
  • Facilidade de implementação

Com propriedades como @keyframes e agora com recursos como a animate-timeline, é possível criar animações complexas sem a necessidade de escrever código JavaScript. Isso reduz a complexidade do projeto e mantém o foco no estilo diretamente no CSS.

Ícone HTML e CSSHTML e CSS Impressionador

Você vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!

Começar agoraSeta para a direita
Fundo HTML e CSSTelas HTML e CSS

Animate Timeline CSS

Agora que você já sabe a importância de usar animações em CSS, nós podemos começar com a parte prática! Lembrando que o arquivo está disponível para download, dessa forma você terá a página completa para fazer os seus testes!

Aqui nós temos um @keyframes, que é onde vamos definir o tipo de animação que será utilizada. Nesse caso vamos utilizar o slideIn (arrastar para dentro em tradução direta).

Veja o código da animação que será utilizada nesse projeto!

CSS
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(80px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

Já fizemos a definição do tipo da animação logo após o comando @keyframes. Em seguida temos 2 blocos, from (que é de onde vamos partir) e o to (onde vamos chegar).

Traduzindo o código nós teríamos o seguinte: Vamos começar com opacidade igual a 0 e estamos movendo (transladando) 80 pixels no eixo vertical. E vamos terminar com opacidade igual 1 e movendo 0 pixels.

É muito parecido com um gradiente, mas aqui teremos ao invés da cor sendo alterada, teremos a opacidade sendo alterada.

Animação por tempo no CSS

Vamos começar com um exemplo onde vamos fazer uma animação por tempo, ou seja, vamos esperar x segundos para que a animação comece.

Obs.: Essa animação que vamos fazer, será no bloco passos da landing page, então vamos inserir esses comandos dentro desse bloco!

CSS
.passos
.temas{
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 20px;

    animation-name: slideIn;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
}

Logo após o gap: 20px; que ainda faz parte do nosso bloco de passos, nós vamos começar a escrever os comandos para animação.

Começando com o nome da animação, que já criamos anteriormente, então vamos utilizar o mesmo nome. Em seguida temos a duração dessa animação (animation-duration), ou seja, em quanto tempo ela vai acontecer.

Logo em seguida, temos o tempo que vai demorar para iniciar essa animação (animation-delay), esse tempo é mais para que você consiga voltar a página pra ver a animação acontecendo.

O animation-timing-function vai dizer como essa animação vai acontecer, se em algum momento vai ficar mais rápida e depois mais devagar ou o contrario. Nesse caso, vamos mantê-la com a velocidade constante.

Por fim, temos o animation-fill-mode que vai dizer como o elemento vai ficar enquanto estiver esperando o animation-delay, se vai ficar na posição inicial da animação, na posição final, no meio… Nesse caso vamos deixar na posição inicial da animação.

Animate timeline Animacao CSS com tempo

O grande problema da animação com tempo é que dependendo do tempo que o usuário demora para chegar no local da animação, é possível que ele não veja nada acontecendo. Então vai ser apenas uma página estática, pois não chegou a tempo na parte da animação.

Animações com Scroll

O que fazer para criar animações com scroll com base no que nós já temos? Vamos retirar os códigos de duração e delay, pois como estamos falando de scroll, isso não faz mais sentido.

Agora a movimentação do scroll é que vai definir quando a animação começa, onde termina e o tempo que vai durar, pois se o usuário parar no meio da animação ela vai ficar parada até ele prosseguir com a movimentação do scroll.

CSS
.passos
.temas{
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 20px;

    animation-name: slideIn;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-timeline: view(75% 12.5%);
}

Para fazer essa animação com scroll usando CSS, nós vamos utilizar o animation-timeline com a função view, onde vamos colocar o início e o fim da animação.

Por isso temos o 75% e 12.5%, pois isso é a distância onde a animação vai começar e terminar em relação a visualização da tela. Isso é importante, pois na configuração padrão a animação só finaliza quando já está lá em cima da tela.

Ou seja, quando já está quase passando o elemento na tela, o que não faz muito sentido, principalmente nesse caso, onde a ideia é deixar o conteúdo totalmente visível, não faz sentido que ele só fique visível quando esteja quase saindo da tela do usuário.

Animate timeline Animacao com Scroll

Pronto! Agora você já tem a sua animação de scroll, lembrando que você pode expandir isso para outros blocos que queira a animação também!

Pode fazer testes e até aplicar na sua própria página, agora que já sabe como criar essa animação usando o CSS! Viu como é muito mais simples do que usar JavaScript?

Conclusão – Animate Timeline CSS

Nesse artigo eu te mostrei como funciona uma animação por tempo no CSS e uma nova propriedade do CSS que te permite criar animações de scroll usando apenas o CSS, sem a utilização do JavaScript.

Agora você já sabe como criar uma animação com tempo e uma animação de scroll dentro da sua página para melhorar ainda mais o visual dela!

Chegamos a mostrar a animação com tempo no CSS, mas você pode achar que ela não é útil, mas lembre-se de que pode ser uma opção para elementos que já aparecem para o usuário, ou seja, ele não precisa chegar até ele para que a animação aconteça.

Já pode entrar no site e já visualizar essa animação, essa é uma opção para utilizar esse método!

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Quer aprender mais sobre JavaScript com um minicurso básico gratuito?

Posts mais recentes de HTML e CSS

Posts mais recentes da Hashtag Treinamentos

Heitor Catunda

Autor do artigo

Heitor Catunda

Gerente de Operações e Especialista em Excel

Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.

Ver mais posts