Neste artigo Sumário · 6 tópicos
O que é CSS?
CSS é a sigla de "Cascading Style Sheets", que quer dizer em português "folhas de estilo em cascata”. Trata-se de uma linguagem de programação para estilos utilizada para definir e padronizar a parte visual de arquivos HTML, ou seja, o seu layout. No CSS, você estipula características e especificações de elementos que compõem uma página de internet como cores, margens, fontes, linhas, alturas, larguras, imagens de fundo, posicionamentos, etc.
Vantagens do CSS
Com o HTML, você até consegue dar uma cara boa ao seu layout, mas não podemos negar que o CSS oferece muito mais opções de personalização. Outras vantagens são que ele é bem mais preciso e é suportado por todos os navegadores atuais.
São estes os motivos que nos levam a utilizar o CSS em nosso dia-a-dia para formatar e estilizar as páginas que desenvolvemos. Além de fazer a formatação e a estilização, podemos também utilizar o CSS na criação de animações para deixar os nossos layouts mais bonitos e interativos.
Flash x Animação CSS
Flash
Navegadores como o Chrome, por exemplo, estão deixando de aceitar sites com tecnologia Flash para focar mais na qualidade e no desempenho dos sites. Apesar de ser uma ferramenta boa - cria muita coisa interativa - ele é bastante pesado e isto interfere muito no carregamento das páginas, além de ser péssimo para SEO.
O fator usabilidade também conta muito aqui: ele é bem complicado de se usar. Outra desvantagem é que nem todos os navegadores tem suporte nativo para ele.
Animação CSS
O CSS gera animações bem mais leves que o Flash. Além disto, você pode fazer quaisquer animações que faria com o Flash, mas de maneira mais simples e fácil. E mais: a Animação CSS não interfere no SEO, e como já citamos, é suportado atualmente por todos os navegadores.
A propriedade Animate do CSS nos permite animar transições de um estilo para o outro. Ela consiste em dois componentes:
- Estilo, com a animação desejada.
- @keyframes, em que você pode configurar as regras de como seu estilo vai se comportar em determinadas situações.
Combinando estes dois componentes, podemos criar combinações que resultam em uma infinidade de animações. E o melhor: sem comprometer a performance do seu site!
Exemplos de Animações CSS
Com a combinação de algumas linhas de códigos, conseguimos fazer animações bem bacanas e leves, como demonstrado abaixo:
CSS:
.cubo{
background-color: blue;
height: 300px;
width: 300px;
margin: auto;
transition: all 1s ease 0s;
transform: rotateZ(0deg);
border-radius: 0 0 0 0;
animation: cubo-transform 5s .5s infinite cubic-bezier(1,0.15,.29,1.21) alternate;
}
@keyframes cubo-transform{
0%{
border-radius: 0 0 0 0;
}
25%{
border-radius: 0 100% 0 0;
background-color: red;
}
50%{
border-radius: 0 100% 100% 0;
background-color: green;
}
75%{
border-radius: 0 100% 100% 100%;
background-color: purple;
}
100%{
border-radius: 100% 100% 100% 100%;
}
}
HTML
<div class="cubo"></div>
Podemos utilizar o CSS para criar diversos tipos de animações, desde um simples hover até animações mais complexas, como loadings, ou até mesmo uma animação de bonecos. Veja o exemplo abaixo, no qual foram utilizados apenas HTML, CSS e algumas imagens:
Seguem abaixo mais algumas animações interessantes que você pode utilizar em seu site. Clique nos botões para visualizar a animação. É muito mais divertido quando você interage com elas!
Como vimos, é uma boa hora para aprender a trabalhar com CSS, criando layouts bonitos e interativos através de suas animações!
