Adicionando animações CSS ao WordPress

As animações podem ser um recurso atraente e visualmente interessante para suas páginas da web. No entanto, criar animações com Flash ou JavaScript consumirá uma parte significativa dos recursos do seu site.

Felizmente, você pode adicionar animações ao seu site WordPress com Cascading Style Sheets (CSS). Essa linguagem de codificação permite incorporar animações ilimitadas em seu site, mas ainda é relativamente acessível e fácil de aprender.

Neste artigo, discutiremos como as animações CSS funcionam e como adicionar uma propriedade de animação CSS ao seu site com e sem plug-ins. Vamos nos mexer!

Como as animações CSS funcionam? (E por que você deve usá-los)

O CSS3 oferece aos usuários a oportunidade de criar animações alterando o estilo de um elemento (por exemplo, uma imagem ou botão) ao longo do tempo. Você pode modificar quantas propriedades CSS do elemento quiser, quantas vezes quiser.

Ao contrário das animações Flash ou Javascript, as animações CSS evitam problemas de compatibilidade do navegador e codificação complicada. Isso permite que você chame a atenção para recursos importantes sem efeitos colaterais negativos, como desempenho reduzido.

Adicionando animações CSS com um plugin

Se você não está confiante em suas habilidades de codificação, nós o cobrimos. Você pode facilmente criar animações CSS com um plugin.

Etapa 1: instalar e ativar um plug-in de animação CSS

Para começar, você precisará instalar um plugin de animação CSS. Estamos usando Blocks Animation: CSS Animations for Gutenberg Blocks, uma ferramenta relativamente nova feita especificamente para o Block Editor.

Você pode encontrar este plugin navegando até Plugins > Adicionar Novo no seu painel do WordPress. Depois de localizá-lo, clique em Instalar agora e depois em Ativar :

Após a conclusão da ativação, vá para a postagem ou página onde deseja incluir sua animação simples.

Etapa 2: crie sua animação

Em seguida, clique no elemento que deseja animar. Na guia Bloco da barra lateral, procure a seção intitulada Animação , que foi adicionada quando ativamos o plug-in na Etapa 1 . Aqui você verá um menu suspenso listando vários efeitos diferentes:

Você pode brincar com quantas opções de animação quiser para encontrar aquela que se adequa ao seu conteúdo.

Etapa 3: personalize o atraso e a velocidade

O plugin Blocks Animation também vem com uma função de temporização para personalizar o atraso e a velocidade da sua animação:

A primeira dessas duas configurações adia o início da animação. Isso pode ajudar a chamar a atenção para seu elemento após o carregamento da página ou permitir que você use animações combinadas, como demonstraremos em breve. Você pode definir a propriedade de atraso da animação em até cinco segundos.

Usando o menu suspenso de velocidade, você pode tornar sua animação Lenta, Mais Lenta, Rápida ou Mais Rápida . Uma animação mais lenta pode ser mais sutil e menos chocante para os visitantes, enquanto uma animação mais rápida fará mais para chamar sua atenção.

Etapa 4: salve e visualize sua animação

Recomendamos salvar sua postagem ou página como rascunho e visualizar seu elemento animado antes de publicá-lo. Certifique-se de salvar a propriedade do nome da animação também se estiver trabalhando com várias animações CSS em uma página. Embora as animações possam ser muito úteis, elas também têm o potencial de distrair e fazer com que suas páginas pareçam confusas.

Visualizar sua página e manter suas animações relativamente simples evitará esses resultados indesejáveis. Abaixo, você pode ver nosso exemplo de animação CSS finalizado, que combina uma imagem animada com o botão que estilizamos nas etapas anteriores:

No caso de você achar que sua animação não se encaixa com o resto do seu conteúdo ou tem o efeito desejado, você pode simplesmente voltar ao Editor de Blocos e ajustá-lo. Essa é a beleza de usar um plugin de animação CSS – é rápido e fácil.

Adicionando animações CSS sem um plugin

Se você se sentir à vontade para editar os arquivos do seu tema, poderá criar manualmente animações personalizadas sem um plug-in. É preciso um pouco de conhecimento de codificação, portanto, essa solução pode ser deixada para aqueles com experiência em desenvolvimento.

Antes de começar, certifique-se de fazer backup do seu site. Também é aconselhável usar um tema filho, para que você possa reverter facilmente para os arquivos padrão do seu tema, se achar necessário.

Etapa 1: entenda as propriedades CSS envolvidas

Antes de fazer qualquer edição, existem oito propriedades importantes a serem lembradas ao criar animações CSS:

• @keyframes: especifica os estilos que serão aplicados ao elemento por meio da animação.
• nome-da-animação: cria um nome que você pode usar para fazer referência à animação em outro lugar do seu código.
• animação-duração: define por quanto tempo a animação deve ser executada.
• animation-delay: indica quanto tempo uma animação deve esperar para começar quando a página for carregada.
• animation-iteration-count: Observa quantas vezes a animação deve ser executada.
• animações-direção: Indica em que direção a animação deve ser executada.
• animation-timing-function: Determina a curva de velocidade da animação.
• animação-preenchimento-modo: especifica um estilo para o elemento quando a animação não está sendo reproduzida.
• animação: uma propriedade abreviada para vincular quadros-chave a elementos.

A mais importante dessas propriedades para entender é o 'quadro-chave'. Este termo vem de processos de animação desenhados à mão, onde o quadro principal era chamado de quadro-chave e outros eram desenhados para entrar ou sair dele.

Na animação CSS, o quadro-chave especifica o que está acontecendo e quando. Veja este, por exemplo:

 Exemplo de @keyframes {
 0% {cor de fundo: vermelho;}
 25% {cor de fundo: amarelo;}
 50% {cor de fundo: azul;}
 100% {cor de fundo: verde;}
 }

O quadro-chave acima afirma que em 25% do caminho da animação, a cor de fundo do elemento especificado mudará de vermelho para amarelo. As porcentagens são normalmente usadas para definir o tempo da animação. No entanto, from e to podem ser usados ​​no lugar de 0% e 100%, respectivamente.

Etapa 2: crie seu arquivo animate.css

Para adicionar animações CSS, você precisará criar um arquivo em seu editor de texto preferido usando as propriedades acima. Ele deve incluir quadros-chave para todas as animações que você deseja usar. Em seguida, você os vinculará a classes CSS específicas para que possa aplicá-los a elementos em seu site.

Aqui está um exemplo. No código abaixo, primeiro criamos uma animação de quadro-chave CSS usando as propriedades de transformação e visibilidade, o que nos permitirá deslizar um elemento do lado direito da tela:

 @keyframes slideInRight {
a partir de {
-webkit-transform: translate3d(100%, 0, 0);
transformar: traduzir3d(100%, 0, 0);
visibilidade: visível;
}
para {
-webkit-transform: translate3d(0, 0, 0);
transform: traduzir3d(0, 0, 0);
}
}

Em seguida, temos que vincular esse quadro-chave a uma classe CSS. Nesse caso, foi nomeado slideInRight. Este código será colocado diretamente após o keyframe acima no arquivo:

 .deslizar para direita {
 -webkit-animation-name: slideInRight;
 nome da animação: slideInRight;
 }

Você pode repetir esse processo para criar quantas animações quiser. Em seguida, salve o arquivo como animate.css. Alternativamente, você pode baixar o popular arquivo Animate.css. Ele contém os quadros-chave e classes CSS para dezenas de animações populares para que você não precise codificar sua própria animação complexa.

Etapa 3: carregue seu arquivo animate.css para seu site

Assim que seu arquivo animate.css estiver completo, você precisará carregá-lo para o diretório do seu tema. Para fazer isso, acesse seu site usando o File Transfer Protocol (FTP) e um cliente FTP como o FileZilla. Você pode encontrar as credenciais necessárias em sua conta de hospedagem.

Você precisará entrar no diretório public_html , navegar até wp-content > themes e encontrar a pasta do seu tema ativo (ou tema filho):

Procure um subdiretório rotulado css . Se houver um, carregue seu arquivo animate.css (ou o arquivo animate.mini.css do Animate.css) para ele. Caso você ainda não tenha essa pasta, você pode facilmente criar um novo subdiretório e nomeá-lo de acordo:

Depois que seu arquivo for carregado com sucesso, não deixe seu cliente FTP imediatamente. Você precisará fazer uma pequena edição de arquivo para acessar esta folha de estilo em seu site WordPress.

Etapa 4: chame a folha de estilo do Animate via functions.php

Em seguida, na pasta do seu tema ativo, encontre seu arquivo functions.php . No final, adicione este trecho de código:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles');
function wpb_animate_styles() {
 wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all');
}

Observe que, se você carregou o arquivo animate.min.css do Animate.css, precisará usar animate.min.css na última linha em vez de animate.css.

Isso permite que seu tema chame a folha de estilo que você acabou de enviar para que você possa aplicar as classes nela aos elementos do seu site. Depois que suas alterações forem salvas, volte para o painel do WordPress.

Etapa 5: aplicar animações usando classes CSS

Agora você pode aplicar qualquer classe em seu arquivo animate.css a elementos em suas postagens e páginas. Se você estiver usando o arquivo Animate.css, poderá consultar uma lista completa de tudo o que ele inclui no GitHub.

Navegue até a postagem ou página que contém o elemento que você deseja animar. No Editor Clássico, mude para o editor de texto. Se você estiver usando o Block Editor, clique no ícone de três pontos na barra de ferramentas do bloco e selecione Editar como HTML :

Em seguida, adicione a classe animada e a classe da sua animação à tag do elemento:

Por fim, visualize sua postagem ou página. Sua animação agora deve estar funcionando:

Você pode adaptar esse processo para incorporar qualquer animação em seu arquivo animate.css .

Mantenha seu site com ótima aparência com o WP Engine

O uso de recursos visualmente interessantes, como animações, pode envolver os visitantes do seu site e criar uma presença online mais profissional. Aqui no WP Engine, nos orgulhamos de fornecer as melhores dicas e truques para desenvolvedores do WordPress para que seu site sempre tenha a melhor aparência.

Quando combinado com nossa plataforma de hospedagem de alto nível, você terá todas as ferramentas necessárias para impressionar seus usuários. Confira nossos planos hoje mesmo!