30 Cool CSS Animations você tem que ver

Anteriormente, publicamos os efeitos de texto criativos que você pode fazer com CSS e muitas outras coisas legais que você achava que não seriam possíveis com CSS. Esta compilação, entretanto, foca nas muitas coisas que você pode animar com CSS, e muitas dessas criações farão você levantar uma sobrancelha ou duas.

De carregar animações para alternar e janelas modais para agitar elementos, essa pilha de 30 usos incomuns e criativos da animação CSS pode abrir sua mente para mais maneiras de brincar com animações CSS que você provavelmente nunca pensou antes.

CSS carregando animação por patrikhjelm

Sete pontos animados mudando para a esquerda e para a direita para significar uma ação de carregamento.

Ícone animado carrinho de compras por jonitrythall

Efeitos animados bonitos para quando os mantimentos são adicionados ao carrinho de compras. Role para baixo para mais.

Hamburger CSS3 apenas animação por Dawid Krajewski

Construído com CSS puro, sem JS ou qualquer outra coisa.

404 personagem animado por com um Es

Pelo menos com esta página de erro, um desenvolvedor está trabalhando nisso. Mesmo que seja um 404.

Aterragem de Marte do CSS por mgitch

Nós pousamos em Marte! Feito com CSS.

O Vingador Por mariosmaselli

Você consegue ouvir a raiva do hulk sacudir a tela? Legal certo?

Dia / Noite toggle Por jsndks

Agora você pode alternar dia e noite com CSS. Ideia genial!

Aplicativo de terceiros do Google Now por codecalm

Aplicativos de terceiros do Google Now, animados.

Clo clo Por judag

Um galo se move assim? Você aposta que sim, completa com o pescoço de jiggy. Ótima prática de CSS3.

Animação de ícone de menu por mariusbalaj

Uma ideia simples colocada em ação; veja o botão de menu se materializar quando você rolar para baixo.

Outro CSS Preloader by Maseone

Uma incrível animação de carregamento rítmico CSS. Hipnótico, não é??

Botão Enviar por auginator

Clique para enviar e o botão anima o processo de carregamento até que o envio seja concluído!

Elastic SVG Sidebar Material Design por suez

Arraste a barra branca para a direita para ver um efeito lateral elástico.

Botão Particle Por igcorreia

Faça o que o botão diz: pairar por grandiosidade.

Botão pegajoso Por Lucas Bebber

Clique para o efeito Gooey. Você vai ter uma vez que você vê, e você vai clicar nele algumas vezes mais. Amirite?

Botão Flipside Por hakimel

Clique em qualquer lado do botão Delete e o botão irá mudar de acordo com o local onde você clica.

Verdadeiro menu de hambúrguer! De CharlesSmart

Um verdadeiramente delicioso menu de hambúrguer. Clique no hambúrguer para efeitos

Cruzando por yy

Veja moto go.

Onda do cubo 3D por waddington

Santo 3D cubo-sicles!

Assinatura de animação Por drygiel

Aqui está uma assinatura que não é na verdade uma animação GIF, mas sim uma sequência PNG animada com CSS3.

Animação gradiente de fundo Por quasimondo

Esse truque muda o gradiente de fundo de uma cor para outra de forma suave e contínua.

Star wars toggle icon Por rss

Um menu de hambúrgueres é transformado em sabres de luz em batalha (uma cruz).

Animação de estilo GIF Por jascha

Veja como uma foto se materializa a partir do pixel art.

Focus in / out input animation Por fluxus

Uma pequena caneta animada escreve sobre o espaço em que você está preenchendo.

Triângulo cromáticoDe felipedeférias

Uma incrível ilusão de ótica, sim, feita com CSS3.

Cafeteira Por thisisroger

Aqui está um lembrete para tomar sua dose diária de café. Como você precisa de um.

Dinossauro cromado por nickspiel

Não consegue alcançar a página que você deseja devido a uma conexão perdida? Aqui está o dinossauro que você sempre vê quando isso acontece, só que desta vez ele está correndo de um meteorito!

Agitação CSS Por elrumordelaluz

Passe o mouse sobre cada efeito para ver o rapaz agitar.

Berço De Newton Por Todas As Coisas Smitty

Se você conhece física, certamente conhece o berço de Newton, mas provavelmente não gosta disso.

Lançar o Modal por koolhaus

Clique para ver a animação da janela modal agradável e suave.

Robô ambulante por P233

Este robô continua andando, andando e caminhando, em torno do eixo Y.

Flexionando as setas de paginação por Hakim

Da primeira página até a última, esta animação de paginação mostra claramente como se você está se saindo, página.

Agora Leia: 15 belos efeitos de texto criados com CSS