Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

Icon Animation | Como animar ícones usando Font Awesome e CSS3? | SW9

Icon Animation | Como animar ícones usando Font Awesome e CSS3? | SW9

Olá Pessoal. Sejam Bem Vindos ao canal e blog SW9 (http://blog.sw9.com.br) 👋

#O que vimos na aula passada?

Foi apresentada uma técnica simples e rápida para animar ícones utilizando a biblioteca de ícones Font Awesome e as funções temporizadoras setTimeout e setInterval, que fazem parte da especificação Javascript.

Você perdeu esta AULA? Não se preocupe, segue o link a seguir: [http://blog.sw9.com.br/2019/05/07/icon-animation-como-animar-icones-usando-font-awesome-e-javascript].

#O que veremos na aula de hoje?

Agora chegou a momento de apresentar para vocês uma segunda técnica para animação de ícones. Desta vez, usaremos a dupla Font Awesome e CSS3 animation. 😲

#Introdução

Alguma vez você precisou utilizar algum ícone animado em seu projeto web? Já faz algum tempo que esta prática é bem comum, e que, se usado na medida certa, eleva a experiência de seu usuário.

Foi pensando nisso, que decidi compartilhar algumas técnicas para animar ícones.

#Antes de começar

O projeto que criaremos nesta AULA está disponível na minha área de downloads. Para acessá-la é bem simples, basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar o seu melhor e-mail e na sequência você receberá o acesso para fazer download deste projeto e de muitos outros.

Portanto, não deixem de acessar a área de downloads e bons estudos. 👊

Ah, caso tenha algum problema para receber o link via e-mail, por favor entrem em contato comigo. 👍

#Porque e onde devemos usar ícones animados?

Desde o surgimento da Internet até hoje, muita coisa mudou, vários padrões surgiram, outros, por sua vez, caíram por terra. Independente destas mudanças, na minha opinião, o objetivo principal não mudou: a busca incessante por público, visualizações, cliques e experiência do usuário.

Uma das formas de aproximar o usuário e proporcionar uma experiência diferenciada, é utilizar recursos visuais atrativos e funcionais para o público. É neste contexto que o uso de ícones animados entra em campo. ⚽

Mas onde podemos usar ícones animados? Em que situação eles fazem sentido? A minha sugestão é utilizar ícones animados em três situações:

1- Page loader – durante a transição de uma página podemos utilizar uma animação;

2- Dentro de um formulário, fazendo parte de botões;

3- Durante uma requisição Ajax: para indicar que a requisição está em andamento.

#Não exagere na dose!!!

Agora pare e pense ✋ É altamente recomendado usar ícones animados em seu projeto, mas use com moderação. O uso exagerado pode trazer o efeito contrário para o seu projeto.

Afinal de contas você não vai querer que seu projeto vire uma árvore de natal. 😁 Use na medida certa e tenha sucesso.

#Alternativas para produzir animação

Existem inúmeras alternativas para produzir animação, especialmente animação de ícones. No entanto, abordarei este tema apresentando duas técnicas simples, rápidas e com excelentes resultados.

Na AULA anterior vimos uma técnica de animação de ícones usando Font Awesome e Javascript Nativo, e agora você vai aprender a animar ícones utilizando Font Awesome e CSS3 animation.

#Qual será o nosso projeto?

Na aula prática, você vai acompanhar passo a passo a criação de duas animações. Uma animação para simular a medição de temperatura utilizando um termômetro e outra simulando a abertura e fechando de uma porta.

Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.

#Apresentando a biblioteca de ícones Font Awesome

Um dos pré-requisitos para a construção do projeto é instalar a biblioteca de ícones Font Awesome. Esta biblioteca é uma das mais completas do mercado e possui inúmeros recursos. Durante a AULA eu vou explicar o básico que você precisa para conseguir utilizá-la.

Mas eu só consigo criar animações usando esta biblioteca de ícones Font Awesome? A resposta é não. Você pode aplicar esta técnica usando outras bibliotecas.

Dica: depois de assistir esta AULA e construir o projeto junto comigo, que tal tentar aplicar o que aprendeu usando outra biblioteca de ícones? Depois, se quiser,

poste seu comentário aqui. 👍

#Entrando em campo o CSS 3

Mas só a biblioteca Font Awesome não é suficiente para o nosso projeto. Neste momento entra em campo o CSS3 e suas propriedades de animação.

#CSS3 e suas propriedades de animação

O CSS3 possui uma série de propriedades, usadas exclusivamente para produção de animações. Para produzir as animações de hoje, teremos contato com as propriedades: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count. Estas propriedades devem ser associadas ao elemento html onde a animação deve ser exibida.

Porém, de nada adianta usar estas propriedades, se deixarmos de lado os keyframes. Mas o que seria um keyframe? O keyframe é uma regra CSS e a base para construirmos uma animação (a chamada pedra fundamental).

Um dos objetivos desta regra é controlar os estágios da animação, gerenciando em que momento cada frame deve ser exibido na linha do tempo de uma animação.

Dentro de um código CSS, devemos usar o keyframe da seguinte forma:

@keyframes [nome-da-animacao] { keyframe-selector { estilos } }

Segue um exemplo real:

@keyframes minhaanimacao {

0%   {top: 0px;}

100% {top: 0px;}

}

Mas não se preocupem, que tudo isso será explicado durante a construção do projeto. 😊

#Compatibilidade

O uso de CSS 3 e das propriedades de animação, ainda é algo que requer um pouco de cuidado quando falamos de compatibilidade com os navegadores. Uma dica é consultar o site chamado Can I Use para observar o quadro de compatibilidade entre os navegadores e tirar suas conclusões. 😀

Para facilitar as coisas, eu compartilho o link do Can I Use que já vai abrir com o quadro de compatibilidade correspondente:

https://caniuse.com/#search=css3%20animation

#Sua imaginação é o limite

A única limitação que poderemos enfrentar é a nossa própria imaginação e criatividade. Portanto, vamos exercitar a nossa imaginação. 💡💡💡

#Hora de assistir ao vídeo

Chegou o momento de arregaçar as mangas e colocar a mão na massa. Go Go Go

Aprenda HTML 5 e CSS 3

Comece a criar Sites Com o Melhor do HTML 5 e CSS 3
Curso Relacionado

[Conclusão]

Na aula de hoje [Icon Animation | Como animar ícones usando Font Awesome e CSS3? | SW9], você aprendeu a criar duas animações de ícones utilizando a biblioteca Font Awesome e CSS3 animation.

Está disponível na minha área de downloads o projeto que usamos nesta AULA. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.

Dentro da minha área de Downloads, procure pela pasta ANIMACAO/ICONE/CSS. O resto é com vocês :-)

Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.

Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

[Links úteis]

Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph

Link do vídeo: https://youtu.be/M8bw-ZAolmw

PlayList Cloud 9: https://goo.gl/7aQbD6

PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8

Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: https://youtube.com/+sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?