Como adicionar animação ao SVG com CSS

Sep 17, 2025
Como
Image: Web Designer
[Imagem: Web Designer]

Quando se trata de animar com o SVGs, uma grande desligamento pode ser a ideia de ser atolado em bibliotecas de JavaScript. No entanto, isso não precisa ser o caso. CSS pode lidar selecionando caminhos individuais dentro de um SVG para criar efeitos. Apenas sabendo que os fundamentos podem significar que é possível transformar ícones planos e clichê em algo um pouco mais impressionante. Então, talvez seja hora de percorrer os passos fundamentais da otimização e animação do SVG. Quando integrado em desenhos diferentes, não demora muito para perceber que as possibilidades são infinitas.

Para mais inspiração em movimento, dê uma olhada no Guia do Creative Bloq para Exemplos de animação CSS. e como codificá-los.

Economize £ 100 com um bilhete super cedo para Gerar css. , a conferência web de um dia hospedada pelo Creative Bloq, revista Web Designer e Net Magazine. Reserve aqui .

01. Crie e salve

Primeiro, crie um SVG para trabalhar. Para este tutorial, estaremos usando um gráfico simples feito no Illustrator. Ao usar o Illustrator para exportar um SVG, reduza o tamanho da arte para caber no gráfico e clique em "Salvar como". Selecione SVG no menu suspenso 'Salvar como Tipo', então 'Código SVG ...' no diálogo Opções do SVG.

02. Otimize para a Web

SVG screenshot

Clique no ícone no canto superior direito para ampliar a imagem [imagem: svgomg]

Cortar tags desnecessárias tornará a imagem mais fácil de lidar. Isso pode ser feito manualmente copiando o código para o seu editor favorito e removendo tags e metadados vazios. Alternativamente, um recurso fantástico chamado Svgomg. fará isso automaticamente. Cole o código na área 'Colar Markup' na interface SVGOMG, copie a imagem novamente usando o botão no canto inferior direito.

03. Configure um documento HTML

Abra seu editor de código de escolha e configure um documento HTML em branco. Vamos escrever a animação CSS em um arquivo chamado main.css. , então crie isso também. Para manter as coisas focadas na animação, nós puxamos a versão somente CSS do Bootstrap 4.1.3.

04. Construa o layout

Vamos construir os ossos do nosso layout e fazer um espaço para o nosso SVG. Adicionamos um cabeçalho e duas colunas: uma à esquerda para algum texto, e uma à direita, que manterá o SVG que estaremos animando. Para animar a página, use uma segunda, estática, SVG como pano de fundo na tag do corpo.

05. Coloque o SVG

Estamos usando nossa animação para fazer a introdução no topo da página mais interessante. Cole o código SVG otimizado na segunda coluna na página. Se estiver usando o Bootstrap, dê ao SVG a classe IMG-FLUID. para se certificar de que escalava em celulares.

06. Adicione aulas ao SVG

Adicionando classes ao SVG permite que o CSS selecione as formas individuais dentro da imagem. Isso significa que você pode animar diferentes formas da imagem em momentos diferentes, criando um efeito mais complexo. 

 & lt; svg & gt;
& lt; g & gt;
& lt; Rect Class = "Rectbackground" largura = "147.4107"
altura = "68.7917" x = "31.2946" y = "114.1042"
rx = "4.5882" Ry = "3.9565" preencher = "# 2a7fff" / & gt;
& lt; path class = "rectText" d = "..." Efeito vetorial = "sem escala-traço" acordado-largura = ". 470476156" font-size = "12" preencher = "# fff"
preenchimento-regra = "hightodd" stroke = "# fff" stroke-linecap = "redondo" / & gt;
& lt; / g e gt;
& lt; / svg & gt;

07. Estados Initais.

Selecionar nossos elementos SVG no CSS é o mesmo que qualquer outro elemento. Usamos nossas classes para selecionar esses elementos dentro do SVG. Ambas as partes do nosso SVG começarão como ocultas quando a página é carregada, então vamos usar o CSS para definir a opacidade do elemento para 0. . 

 path.recttext {
opacidade: 0;
}
ret.rectbackground {
opacidade: 0;
}

08. Declarar as animações

Precisamos declarar o nome e os keyframes para cada animação para que CSS saiba o que queremos fazer quando pedimos para realizar um efeito. eu escolhi TextDraw e rectfade. , como eles descrevem cada animação. rectfade. será uma animação simples de duas etapas. TextDraw terá um passo médio extra. 

 @KeyFrames textdraw {
0% {}
50% {}
100% {}
}
@keyframes rectfade {
a partir de{}
para{}
}

09. Atribuir animação e propriedades

SVG and coding

Clique no ícone no canto superior direito para ampliar a imagem [imagem: joseph ford]

Nós adicionamos o. rectfade. animação para o RECTBLOGO elemento e dar uma duração de um segundo. A facilitada Bezier cúbico está sendo usado para dar uma sensação mais suave. Nós adicionamos para a frente Portanto, o elemento mantém as propriedades do último quadro-chave quando a animação termina. 

 ret.rectbackground {
opacidade: 0;
Animação: Rectfade 1S Cubic-Bezier (0,645,
0,045, 0,355, 1) para a frente;
}

10. A animação do retângulo

SVG image

Clique no ícone no canto superior direito para ampliar a imagem [imagem: joseph ford]

Com apenas dois keyframes, tudo o que precisamos fazer para o nosso retângulo é definido um conjunto de atributos de início e fim. Vamos começar com um 1% largura e acabamento em 100% para dar um "expansão para o efeito certo". Nós também podemos definir Opacidade: 1. para o último quadro-chave, então a forma desaparece ao mesmo tempo. 

 @keyframes rectfade {
a partir de {
Largura: 1%;
}
para {
Largura: 100%;
opacidade: 1;
}
}

11. A animação de texto

Vamos criar um efeito de desenho de linha em nosso texto, então use um preenchimento para desaparecer. Para configurar a animação de texto, damos a nossa TextDraw com uma duração de quatro segundas. O bezier cúbico foi modificado neste passo para dar um ritmo de movimento ligeiramente diferente. 

 path.recttext {
opacidade: 0;
Animação: TextDraw 4s
cúbico-bezier (0,56, -0,04, .32, .7) para a frente;
}

12. atrasar o início

Nosso texto precisa ser executado assim como o retângulo terminar de se desvanecer. Porque o retângulo tem uma segunda duração, atrase o início da animação de texto naquela época. 

 path.recttext {
opacidade: 0;
Animação: TextDraw 4s
cúbico-bezier (0,56, -0,04, .32, .7) para a frente;
Atraso de animação: 1s;
}

13. Desenho de linha de emulate

SVG animation

Clique no ícone no canto superior direito para ampliar a imagem [imagem: joseph ford]

Para obter nosso efeito de desenho de linha, usaremos o stroke-painarray. e stroke-dashoffset. parâmetros. Seus valores serão diferentes para os meus, dependendo do SVG que você está usando. Para encontrar seu valor, use suas ferramentas de desenvolvedor preferidas e aumente stroke-painarray. a partir de 0. até que toda a forma seja coberta por um derrame. 

 path.recttext {
opacidade: 0;
Stroke-Dasharray: 735;
Animação: TextDraw 4s
cúbico-bezier (0,56, -0,04, .32, .7) para a frente;
Atraso de animação: 1s;
}

14. Primeira linha do quadro-chave de desenho

Agora temos o nosso incrível que cobre todo o caminho de texto, vamos compensá-lo pelo seu próprio comprimento para afastá-lo efetivamente. Usando stroke-dashoffset. pelo mesmo valor que o nosso DashArray. deve fazer isso. Vamos definir isso em nosso primeiro keyframe. Também faremos a forma preencher transparente e definir o acidente vascular cerebral para branco, se ainda não for. 

 0% {
Preencha: RGB (255, 255, 255, 0);
acidente vascular cerebral: #fff;
Stroke-Dashoffset: 800;
opacidade: 1;
}

15. Desenhe as linhas

Nosso quadro médio aparece em 40% através da animação. Nós trazemos o stroke-dashoffset. De volta a zero para que o traço cubra o caminho inteiro. Podemos re-adicionar o preenchimento transparente nesta fase para garantir que o preenchimento apareça apenas quando o desenho estiver concluído. 

 40% {
Stroke-Dashoffset: 0;
Preencha: RGB (255, 255, 255, 0,0);
}

16. Preencha a forma

Para a última parte da animação, preencheremos a forma em branco. Tudo o que precisamos fazer para o último quadro-chave é aumentar o valor alfa da cor de preenchimento. Isso cria o efeito fade-em do preenchimento. 

 100% {
Preencha: RGB (255, 255, 255, 1);
Stroke-Dashoffset: 0;
opacidade: 1;
}

generate conference

Este artigo foi originalmente publicado na revista Creative Web Design Web designer . Compre Edição 286. ou se inscrever .

Consulte Mais informação:

  • Adicionar filtros SVG com CSS
  • Como projetar com formas CSS: uma introdução
  • Como codificar efeitos de texto inteligentes com CSS

Como - Artigos mais populares

Como baixar fotos do Instagram: Tudo que você precisa saber

Como Sep 17, 2025

(Crédito da imagem: Joseph Foley no Instagram) Baixe as imagens do Instagram - Ba..

Adobe FRESCO Tutorial: Crie um retrato no aplicativo de pintura

Como Sep 17, 2025

(Crédito da imagem: Phil Galloway) Para este tutorial do Adobe Fresco, estarei criando um retrato vibrante e emotivo..

Como modelar a arte do conceito no cinema 4D

Como Sep 17, 2025

Há alguns anos, o diretor de arte dos jogos Lucid me pediu para ajudá-los a projetar 10 veículos independentes para um jogo de..

Criar um menu de deslizamento

Como Sep 17, 2025

Uma ótima maneira de melhorar o experiência de usuário No seu site é adicionar um menu de deslizamento; Ele cria uma maneira atraente para os usuários encont..

Como remover um fundo no Photoshop

Como Sep 17, 2025

Página 1 de 4: A ferramenta mágica de varinha A ferramenta mágica de varinha A rápida seleção e ..

Criar texturas fantasmagóricas com técnicas de mídia mista

Como Sep 17, 2025

Quando eu troquei pela primeira vez de um fluxo de trabalho de ilustração digital, meu Técnicas de pintura ..

Paint Wet-on-Wet em óleos

Como Sep 17, 2025

Pintura 'Alla Prima' (isto é, pintando wet-on-wet, em uma sessão) é a técnica ideal para abraçar a natureza das tintas a ól..

Faça um logotipo no Illustrator

Como Sep 17, 2025

Esta semana viu a liberação de alguns novos vídeos no Adobe's Faça agora Playlist, uma coleção de clipes sobre como criar projetos de design com aplicativos de nuvem criativos em um min..

Categorias