20 melhores animações CSS no CodeCanyon

Houve uma época na história da internet, quando você tinha que usar Flash se você quisesse adicionar alguns efeitos visuais para o seu site além de um GIF animado. Avançamos para hoje, e encontramos o Flash morto e coisas como CSS3 e HTML5 trazerem animações fantásticas e efeitos na Web.

Se você deseja adicionar algumas grandes animações CSS para seu site ou o próximo projeto de web, aqui está uma lista das 20 melhores animações CSS na CodeCanyon para você começar:

1. Aero - CSS3 Hover Effects

Adicione alguns efeitos de suspensão de imagem aerodinâmica com efeitos Aero - CSS3.

É totalmente ágil e fácil de usar, e você também vai encontrar isto:

• fácil de mudar de cor e mudar de círculo para quadrado
• compatível com todos os navegadores — até o Microsoft Edge
• compatível com SASS
• CzS personalizável
• e mais!

Com 10 efeitos incluídos no lançamento e mais efeitos chegando, Aero - CSS3 Hover Effects é um pacote de animações CSS para efeitos de sua imagem.

2. MegaHover Mouse Over Effects

O MegaHover Mouse Over Effects oferece um robusto conjunto de efeitos de conversão de imagem CSS3 compatíveis com Bootstrap 3.

Também:

• usa ícones FontAwesome
• cross browser compatível
• totalmente responsivo
• e mais

Integre e modifique facilmente o MegaHover Mouse Over Effects em centenas de efeitos parecidos de boa aparência.

3. Animatia - CSS Image Hover Effects

Tempo de carregamento mínimo, fácil de usar, altamente personalizável? Animatia - CSS Image Hover Effects faz isso e mais.

Este lote de CSS inclui:

• mais de 115 efeitos hover altamente personalizáveis
• Arquivos totalmente responsivos e fáceis de usar
• CSS3 puro e ícones Font Awesome 
• e mais

Use Animatia - CSS Image Hover Effects para estilos de botão, efeitos de sobreposição, legendas e outras animações CSS.

4. Hover Effects Framework

O Hover Effects Framework é uma solução de animação CSS muito macia.

Código limpo, totalmente responsivo, e:

• IcoMoon Ultimate Font
• 4 formas e 5 cores
• 50+ animações
• e mais

O Hover Effects Framework possui um código limpo e, o melhor de tudo, inclui muitos exemplos para começar com algumas boas animações CSS.

5. Collection of Preloaders

Você nunca precisará de outra coleção de preloaders depois de obter Collection of Preloaders.

Você receberá:

• boa documentação a ser usada para facilitar a personalização
  
• um conjunto leve e flexível de animações CSS3
• 27 pré-carregadores exclusivos

Completamente amigável para dispositivos móveis, Collection of Preloaders é uma excelente adição à caixa de ferramentas CSS3 de qualquer pessoa.

6. CSS3 Image Hover Effects

Se você já viu uma animação CSS para efeitos de zoom de imagem, você já viu todos eles, certo?

Não é bem assim.

CSS3 Image Hover Effects inclui alguns efeitos realmente agradáveis ​​e únicos.

Inclui:

• 22 diferentes efeitos de foco de imagem CSS3
• totalmente incrível e responsivo
• código limpo CSS3
• e mais

Confira CSS3 Image Hover Effects compatíveis com Bootstrap.

7. Image Hover CSS Library

CSS Image Hover é uma biblioteca de animação CSS de imagem leve, escalável, que merece uma olhada.

Esta é uma coleção classificada de 58 classes de efeito, ministradas até apenas 25KB.

• funciona com qualquer conteúdo
• efeitos hover únicos
• fácil de usar
• e mais

É difícil se separar de outras animações de hover CSS de imagem, mas a biblioteca Image Hover CSS o fez.

8. SVG Logo Scroll Animation | CSS3 and Javascript

É bom quebrar as animações usuais do CSS - efeitos de zoom de imagem - e dar uma olhada em algo como o SVG Logo Scroll Animation | CSS3 e Javascript.

Em apenas menos de 4k, ele adiciona algumas belas animações SVG de página de rolagem.

Construa alguma animação de página web bela com SVG Logo Scroll Animation | CSS3 and JavaScript.

9. Viavi CSS3 Scroll Effects

Viavi CSS3 Scroll Effects é uma solução de animação de rolagem HTML, CSS3 de muito bom aspecto.

Alguns dos recursos incluem:

• 16 efeitos de rolagem CSS3
• implementação simples
• totalmente responsivo
• e mais

Usando um sistema de grelha e habilitado a toques para uso móvel, o Viavi CSS3 Scroll Effects não apenas parece bom, mas também está bem implementado.

10. CSS3 Spinners & Loaders

Precisa de carregadores sem gifs?

Não há problema. CSS3 Spinners & Loaders oferece.

• encontre mais de 25 variações
• fácil de personalizar
• fácil de estender

CSS3 Spinners & Loaders está bem documentado e é uma solução CSS completa para spinners e carregadores.

11. Midix - CSS3 Animation Effects without jQuery

Usando puro CSS3, Midix - CSS3 Animation Effects sem jQuery oferece um sólido conjunto de 16 animações CSS.

Você pode ajustar a:

• velocidade da animação
• atraso de animação
• cores de ícones

Você não só receberá uma maravilhosa coleção de animações Midix - CSS3 Animation Effects without jQuery, mas também atualizações gratuitas e suporte amigável.

12. CSS3 Hover Effects

CSS3 Hover Effects é outra boa opção.

Você pode mudar facilmente:

• cor
• tamanho da borda
• círculo para quadrado
• espaçamento entre o bloco de texto

Com 479 ícones de retina e 20 efeitos diferentes, o CSS3 Hover Effects é um ótimo recurso para ter e usar.

13. VSPreloader - Ultimate CSS Animated Preloaders

À medida que os preloaders animados forem, o VSPreloader - Ultimate CSS Animated Preloaders é uma das soluções mais exclusivas, criativas e de boa aparência que você vai encontrar.

As características incluem:

• 60 ajudantes
• 40 presentes
• 30 animações
• cores ilimitadas

Também é incrivelmente nítida e única.

Veja mais de perto o VSPreloader - Ultimate CSS Animated Preloaders. Acho que você vai ficar impressionado.

14. Heed - Pure CSS3 Animation Effects

Heed - Pure CSS3 Animation Effects oferece tudo o que você gostaria em uma coleção de animações CSS.

É fácil instalar, editar e configurar com SCSS (arquivo incluído).

• 20 opções de cor de material design
• Ícones Font Awesome
• 15 efeitos
• e mais

Heed - Pure CSS3 Animation Effects é retina friendly, apoio amigável, e inclui atualizações gratuitas.

15. Ayan - CSS3 Link Hover Effects

Enquanto a maioria das animações CSS você encontra foco em imagens e efeitos de página, o Ayan - CSS3 Link Hover Effects fornece uma linha impressionante de efeitos hover de link.

Você encontrará 30 ótimos CSS3 link hover effects e:

• compatibilidade sólida do navegador
• documentação de ajuda
• animações modernas
• e mais

O pacote Ayan - CSS3 Link Hover Effects é criativo, nítido e adiciona um toque agradável de animações CSS sem ser excessivamente chamativo.

16. Sinister - Pure CSS Image Hover Effects

Com mais de 100 efeitos de deslocamento, Sinister - Pure CSS Image Hover Effects fornece uma quantidade impressionante de efeitos bem projetados.

Inclui mais de:

• 22 efeitos de transição de conteúdo
• 18 efeitos de transição de sobreposição
• 23 efeitos de transição de botão
• 100 efeitos de focalização

Sem usar JavaScript ou jQuery, e usando CSS puro, Sinister - Pure CSS Image Hover Effects apresenta:

• zoom-in e zoom-out
• rotação X e rotação y
• rotação para a direita e para a esquerda
• rotação e escala
• transição cúbica
• layer hover
• e mais

17. Stylish Social Media Animated Icons Style

Adicione algumas animações CSS agradáveis aos seus ícones de mídias sociais com estilos de ícones animados de estilo social elegante.

Com um design limpo e nove estilos diferentes para escolher, você também aproveitará:

• personalização e fácil implementação
• base sólida de código e documentação
• Nenhuma dependência de imagem ou ícone
• cross-browser compatível
• e mais

Stylish Social Media Animated Icons Style adiciona um toque agradável de cor e animação CSS para sua programação de ícones de mídia social.

18. CSS3 Animations

Facilmente anime seu HTML div, p e corpo com Animações CSS3.

Este é um bom trecho que pode ser usado e aplicado em muitas situações de design diferentes.

As características incluem:

• fácil de usar e personalizar
• CSS3 somente, nenhum JavaScript
• 10+ animações

Você adicionará CSS3 Animations à sua caixa de ferramentas de design?

19. Pure CSS3 Image Accordion

Crie sua própria configuração de slider ou similar usando o Pure CSS3 Image Accordion para algumas animações CSS de boa aparência.

É:

• totalmente responsivo
• sem nenhuma largura fixa
• de quatro opções de legenda
• fácil de personalizar

Faça alguma música visual com este Pure CSS3 Image Accordion.

20. CSS3 Mega Tooltip Animation Pack

Cansado de tooltips simples?

Adicione alguma magia de animação CSS usando o pacote CSS3 Mega Tooltip Animation Pack.

Este pacote de animação tooltip CSS inclui:

• 10 efeitos de animação
• 8 predefinições de cores
• documentação
• e mais

CSS3 Mega Tooltip Animation Pack também suporta o Internet Explorer

Conclusão

Mesmo com muitas animações CSS diferentes disponíveis no Envato Market, talvez você ainda não tenha encontrado exatamente o que você está procurando.

Não é um problema. Você pode construir seu próprio!

Confira os eBooks do Envato como Mastering CSS3, pegue um dos muitos cursos de código diferentes oferecidos, ou encontre e siga um Tutorial de código CSS3.