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.