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.
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.
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.
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!
Animação CSS. Site by Elton Rodrigo