Como fazer animação infinita de fundo com CSS? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 12 Horas 49 Min 44 Seg Tempo restante da oferta: 12 49 44 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Como fazer animação infinita de fundo com CSS? [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Como fazer animação infinita de fundo com CSS? Veja como criar uma animação infinita de fundo com efeito parallax usando apenas CSS puro. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/como-fazer-animacoes-infinitas-de-fundo-com-css-puro.png) Olá Web Developer. Hoje veremos como criar uma animação infinita de fundo com CSS puro. Por ser infinita teremos que saber como cuidar para que o usuário não perceba quando a animação for reiniciada. Animações CSS assim são ótimas, pois você tem controle programaticamente e são bem mais leves do que imagens ou vídeos. Obviamente que você pode colocar imagens nesta técnica, mas neste exemplo veremos como fazer sem nem precisar de imagens. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) Esta técnica foi usada para as estrelas que aparecem de fundo ao finalizar um curso da TreinaWeb. ![Tela do painel da TreinaWeb ao concluir um curso](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/painel-treinaweb-conclusao-do-curso.png) Prévia do resultado: ## Criando o Fundo do Céu Para criar o céu vamos simplesmente criar uma ``. Ela será um contêiner para que a gente coloque dentro os elementos que serão animados. ```html ``` Em seguida vamos estilizar este elemento. Com o intuito de termos um exemplo mais simples, vou definir uma largura e altura para ele. Dessa forma nossa animação será menor, então não vamos precisar desenhar tantas estrelas para ter um bom efeito. Mas é claro que você pode fazer do tamanho que quiser. Também vou adicionar um gradiente como fundo para simular a cor do céu. Teste com outras cores e outras formas de gradiente. Um gerador de gradientes muito bacana é o [https://cssgradient.io/](https://cssgradient.io/ "https://cssgradient.io/"). ```css .container{ width: 350px; height: 150px; background: linear-gradient(0, #120c56, #000000); } ``` ## A primeira estrela no céu Logo após a criação do céu vem a parte onde iniciaremos nossas estrelas. Você verá como é simples criá-las sem utilizar nenhuma imagem e sem lotar nosso `HTML` com tags. Basicamente iremos adicionar uma única ``, que também vamos adicionar a classe `stars`. ```html ``` Pode ser difícil de acreditar no começo, mas este é basicamente todo o `HTML` que precisamos. Então vamos estilizar o novo elemento para a criação das estrelas. ```css .stars{ width: 3px; height: 3px; border-radius: 50%; } ``` O que fizemos aqui é muito simples: deixamos a nossa `` com `3px` de largura e altura, e utilizamos o `border-radius` para que ela fique arredondada, resultando em uma bolinha que será nossa estrela. Mas dessa forma nós não vamos enxergar nada no momento, porque ela não tem cor, é invisível. É exatamente agora que entra o segredinho para criar várias estrelas com uma única ``! A propriedade `box-shadow` nos permite criar várias sombras do elemento em qualquer posição e em qualquer cor. Então podemos utilizar essa propriedade para criar “clones” do nosso elemento na cor que quisermos. ```css .stars{ width: 3px; height: 3px; border-radius: 50%; box-shadow: 50px 30px white, 100px 80px white, 80px 120px white, 300px 20px white, 250px 130px white, 200px 50px white, 150px 100px white, 320px 100px white; } ``` Cada sombra deve ser separada por vírgula. O primeiro valor é a posição horizontal, a segunda é a vertical e a terceira é a cor. Já que o nosso céu possui a dimensão de 350x150, atente-se para não criar as sombras fora do céu, ou elas não vão aparecer. O tamanho das sombras sempre será do mesmo tamanho do elemento. Como criamos um elemento de `3px X 3px`, este será o tamanho de todas as sombras. É provável que você ache esta etapa bem cansativa e repetitiva. O melhor para criar as sombras é utilizar algum pré-processador de CSS como o `Sass` para automatizar isso. Por consequência bastará criar uma função para gerar as sombras, onde você pode passar as configurações de tamanho, cor, quantidade, posições e mandar ele gerar as posições aleatoriamente. [ ![CSS - Sass](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/sass.svg) Curso CSS - Sass Conhecer o curso ](https://www.treinaweb.com.br/curso/css-sass-avancado) ## Animando as Estrelas Vamos iniciar a animação das nossas estrelas. ```css @keyframes anim-stars { from { transform: translateY(0px); } to { transform: translateY(-150px); } } ``` Basicamente criamos uma animação que fará o valor de `transform` ir de `translateY(0px)` para `translateY(-150px)`. Isso significa que o elemento que animarmos com isso irá subir `150px`. Este é exatamente o valor da altura do nosso contêiner, e você já vai entender o motivo disso. Para que a gente tenha a animação funcionando, vamos adicioná-la ao nosso elemento das estrelas. ```css .stars{ ... animation: anim-stars 10s linear infinite; } ``` Estamos chamando a nossa animação, ajustando-a para durar 10 segundos com uma velocidade constante (`linear`) e que vai repetir infinitamente (`infinite`). O único problema com essa animação é que rapidamente percebemos onde acabam as estrelas e quando a animação é reiniciada. A fim de arrumar isso teremos o passo final. ## Deixando a animação infinita Para dar a ideia de animação infinita não podemos deixar as pessoas perceberem quando a animação é reiniciada. Para que a gente consiga esse resultado vamos precisar de uma cópia exata de nossas estrelas e posicioná-las mais abaixo das estrelas originais. No momento em que as estrelas originais acabarem, a nossa cópia já vai entrar em cena, parecendo uma continuação. Caso ainda esteja um pouco confuso, vamos ver como vai ficar e você logo vai entender. Com o intuito de ter uma cópia das nossas estrelas sem precisar criar outra ``, vamos utilizar o pseudo-elemento `::after`. Para que ele apareça mas sem conteúdo, vamos utilizar a propriedade `content` com o valor `" "`. Para deixá-lo de maneira idêntica à nossa ``, vamos copiar todas as propriedades dela. Apenas vamos ignorar a propriedade `animation`. Isso porque o pseudo-elemento já será animado junto com a ``. ```css .stars::after{ content: " "; width: 3px; height: 3px; border-radius: 50%; box-shadow: 50px 30px white, 100px 80px white, 80px 120px white, 300px 20px white, 250px 130px white, 200px 50px white, 150px 100px white, 320px 100px white; } ``` Dessa maneira nós teremos um pseudo-elemento com estrelas (sombras) nas exatas posições das estrelas que criamos anteriormente. Para termos essas estrelas mais abaixo vamos mudar sua posição. O primeiro passo para isso é colocar um `position: relative` na nossa ``. ``` .stars{ position: relative; width: 3px; height: 3px; ... } ``` E agora no nosso pseudo-elemento vamos colocar um `position: absolute` para podermos movê-lo em relação à posição da ``. Vamos colocar um `top: 150px` para que ele vá `150px` para baixo. Este valor é por causa da altura do nosso céu. ```css .stars::after{ content: " "; position: absolute; top: 150px; width: 3px; ... } ``` Desse modo nós já teremos o resultado esperado. Lembre-se que a animação inteira possui 10 segundos. Você pode ficar o tempo que quiser e verá que a animação continua rodando sem parar e sem deixar claro quando ela foi reiniciada. [ ![Gerenciamento de Projetos - Avançado](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/gerenciamento-projetos.svg) Curso Gerenciamento de Projetos - Avançado Conhecer o curso ](https://www.treinaweb.com.br/curso/gerenciamento-de-projetos-avancado) ## Entendendo a Animação Infinita de Fundo Para entender melhor como esse efeito funciona eu pintei as estrelas do pseudo-elemento de outra cor. Veja que logo que as estrelas brancas (que são da nossa ``) sobem, as estrelas do nosso pseudo-elemento já sobem juntas. Isso faz com que a gente não perceba onde termina e onde começa a animação. O verdadeiro fim da animação é quando toda a nossa `` sai de cena. Neste momento o nosso pseudo-elemento irá tomar exatamente a posição inicial da nossa ``. Como a animação acaba nesse exato momento, ela é reiniciada. Dessa forma, a `` volta para sua posição inicial, que era onde o pseudo-elemento estava. Já que o pseudo-elemento e a `` são idênticos, não há como percebermos que houve essa troca entre eles, o que disfarça a reinicialização da animação. Você também pode ter notado agora que as estrelas estão aparecendo fora do céu. Isso foi apenas para mostrar como a animação funciona. Para evitar isso basta adicionar `overflow: hidden` na classe `.container` e as estrelas que estiverem fora não serão exibidas. ## Melhorando a animação com Parallax Parallax é um efeito utilizado para passar a ideia de profundidade. Já ensinei a [fazer o efeito parallax](https://www.treinaweb.com.br/blog/efeito-parallax-apenas-com-css/ "fazer o efeito parallax") aqui no blog utilizando apenas CSS. Para fazer isso no nosso céu basta colocarmos uma nova `` para termos uma nova camada de estrelas. ```html ``` Por fim iremos criar as estrelas no `CSS` da mesma forma. Para dar uma ideia de que são estrelas mais ao fundo, agora farei estrelas menores. Podemos reutilizar a animação, mas agora também farei uma pequena modificação: vou passar o tempo de 10 segundos para 20 segundos. Com as duas animações em tempos e tamanhos diferentes teremos o efeito de profundidade. ```css .stars2{ position: relative; width: 1px; height: 1px; border-radius: 50%; box-shadow: 15px 15px white, 125px 35px white, 50px 80px white, 10px 120px white, 275px 90px white, 230px 10px white, 120px 130px white, 300px 130px white, 220px 115px white; animation: anim-stars 20s linear infinite; } .stars2::after{ content: " "; position: absolute; top: 150px; width: 1px; height: 1px; border-radius: 50%; box-shadow: 15px 15px white, 125px 35px white, 50px 80px white, 10px 120px white, 275px 90px white, 230px 10px white, 120px 130px white, 300px 130px white, 220px 115px white; } ``` [ ![Desenvolvedor Front-end Sênior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ux-ui.svg) Formação Desenvolvedor Front-end Sênior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-senior) - [ #Design ](https://www.treinaweb.com.br/blog/tag/design) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #Animações ](https://www.treinaweb.com.br/blog/tag/animacoes) - [ #parallax ](https://www.treinaweb.com.br/blog/tag/parallax) - [ #Animações CSS ](https://www.treinaweb.com.br/blog/tag/animacoes-css) - [ #Animação no Front-End ](https://www.treinaweb.com.br/blog/tag/animacao-no-front-end) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01111116/jogo-feito-400x280.png) [ Desenvolvimento de Jogos ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-de-jogos) 9 anos atrás ## [ Como um jogo digital é criado? ](https://www.treinaweb.com.br/blog/como-um-jogo-digital-e-criado) Veja nesse artigo como um jogo digital é criado e os principais conceitos envolvidos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155045/Flip-Cards-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Aprenda a Criar o Efeito de Flip Cards ](https://www.treinaweb.com.br/blog/css-aprenda-a-criar-o-efeito-de-flip-cards) Aprenda a criar o efeito de Flip Cards com CSS puro de maneira bem simples. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/03/CSS-SHORTHAND-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Entendendo o shorthand no CSS ](https://www.treinaweb.com.br/blog/entendendo-o-shorthand-no-css) Vamos aprender o que é shorthand no CSS, entender o conceito e aprender a deixar nossos estilos mais limpo e de fácil manutenção Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/04133725/novo-painel-treinaweb-ava-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 7 anos atrás ## [ O que há de novo na plataforma da TreinaWeb? Conheça as novas funcionalidades! ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-na-plataforma-da-treinaweb-conheca-as-novas-funcionalidades) Venha conhecer as novas funcionalidades da nova plataforma de ensino da TreinaWeb e aprenda dicas para aproveitá-la melhor. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/12150130/MATERIAL-DESIGN-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é Material Design? ](https://www.treinaweb.com.br/blog/o-que-e-material-design) Se você deseja criar rapidamente aplicações bonitas e utilizáveis, dê uma conferida no Material Design. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/06104639/TW-ENTREVISTAS-FABIO-400x280.png) [ Desenvolvimento Web ](https://www.treinaweb.com.br/blog/categoria/entrevistas-desenvolvimento-web) 8 anos atrás ## [ TW Entrevista 08: Fabio Costa ](https://www.treinaweb.com.br/blog/tw-entrevista-08-fabio-costa) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Fabio Costa, desenvolvedor que já trabalhou na Globo.com, no Facebook e agora está na GoDaddy. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/css-filters-copy-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ CSS Filters - Tratamento de imagens em sua página ](https://www.treinaweb.com.br/blog/css-filters-tratamento-de-imagens-em-sua-pagina) Com a evolução do CSS3 passou a ser possível criar muitos dos efeitos dos softwares de edição de imagem diretamente pelo CSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2025/02/como-mudar-de-area-TI-min-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 2 anos atrás ## [ Como mudar de área na TI sem começar do zero ](https://www.treinaweb.com.br/blog/como-mudar-de-area-na-ti-sem-comecar-do-zero) Quer mudar de área na TI sem começar do zero? Veja como aproveitar suas habilidades, aprender o essencial e fazer essa transição. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/12/capa-metas-2025-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 2 anos atrás ## [ Como traçar metas eficientes para 2025 ](https://www.treinaweb.com.br/blog/como-tracar-metas-eficientes-para-2025) Prepare-se para 2025! Veja como traçar metas de carreira eficientes em TI para alcançar seus objetivos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/04112944/DJANGO-PROJETOS-PYCHARM-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Como criar comandos customizados no Django ](https://www.treinaweb.com.br/blog/como-criar-comandos-customizados-no-django) Aprenda a criar comandos customizados no Django para automatizar tarefas, personalizar funcionalidades e integrar sistemas externos! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/03/evoluir-carreira-TI-min-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 3 anos atrás ## [ Como evoluir em sua carreira da forma correta? ](https://www.treinaweb.com.br/blog/como-evoluir-em-sua-carreira-da-forma-correta) Confira nesse artigo alguns pilares para te ajudar a construir uma carreira de sucesso na área de tecnologia. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **12h 49min 44s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58