Técnicas de animação CSS3 que você precisa conhecer

Tradução: tecnologia de animação CSS3 que você precisa conhecer

Traduzido de: O que você precisa saber sobre CSS comportamental

Por favor, respeite os direitos autorais e indique o link para este site ao reimprimir!

Prefácio de tradução: Este artigo foi traduzido da revista Smashing, mas o conteúdo do texto original é um pouco superficial e não muito completo. A observação front-end adiciona conteúdo cada vez mais sistemático com base na tradução. Se houver alguma deficiência, corrija-a e adicione-a.

À medida que a web evolui e os navegadores se tornam mais capazes de renderizar códigos mais avançados, estamos no caminho certo para atingir nosso objetivo de abranger todas as plataformas e navegadores. Não só podemos gastar menos tempo garantindo que nosso modelo de caixa pareça normal no IE6, mas também cria uma atmosfera que incentiva a inovação, evita hacks e enfatiza scripts front-end.

A Internet é um ótimo ambiente e uma comunidade colaborativa com uma riqueza de conhecimento para compartilhar. Queríamos cantos arredondados e fizemos isso acontecer; queríamos várias imagens de fundo e fizemos isso acontecer; Portanto, a demanda nunca é um problema, caso contrário, ainda podemos estar usando tabelas para fazer o layout das páginas e usando muito código. Todos sabemos que a Internet pode fazer qualquer coisa.

Nascido para a Internet

Propriedades CSS 3 como border-radius, box-shadow e text-shadow estão começando a ganhar força em navegadores avançados como webkit (Safari, Chrome, etc.) e Gecko (Firefox). Elas (essas propriedades CSS) já criam páginas mais leves e experiências mais ricas para os usuários, e se degradam normalmente. No entanto, estas são apenas algumas das muitas coisas que o CSS 3 pode fazer por nós.

Neste artigo, daremos um passo adiante e veremos técnicas CSS3 mais avançadas, como transformações, transições e animações. Abordaremos o código em si, o suporte do navegador e alguns exemplos que demonstram adequadamente como essas novas propriedades podem melhorar seu design e a experiência geral do usuário.

Transformação CSS

A transformação CSS é um rascunho do W3C. Mas isso não me esclareceu quando me sentei para ler todos os seus recursos e aprender algumas coisas. Como você pode imaginar, este documento foi escrito em termos técnicos e se concentra mais em elementos e matrizes gráficas deformadas (ou seja, gráficos). Como não toquei em matrizes desde o primeiro ano de cálculo, tive que fazer muitos testes de navegador e adivinhar e verificar este capítulo.

Depois de ler todos os tutoriais que encontrei e muitos testes de navegador, descobri algumas informações úteis sobre transformações CSS das quais todos podem se beneficiar.

transformar

O atributo transform implementa algumas das mesmas funcionalidades que podem ser implementadas com SVG. Pode ser usado em elementos inline e elementos de bloco. Ele nos permite girar, dimensionar e mover elementos - com apenas uma linha de código CSS.

A maior crítica a alguns designs de vanguarda é que o texto não é selecionável (deve ser conseguido através do corte de imagens). Quando você se tornar proficiente no uso do atributo transform para controlar o texto, isso não será mais um problema, pois este é um método CSS puro, portanto o texto dentro do elemento permanecerá opcional. Esta é uma grande vantagem do CSS em relação ao uso de imagens (ou imagens de fundo).

Alguns recursos de transformação divertidos e úteis:

girar

Girar permite girar um objeto passando um valor em graus.

escala

Escala é uma função de escala que pode aumentar qualquer elemento. Leva números positivos e negativos, bem como decimais como argumentos.

traduzir

Traduzir reposiciona elementos com base nas coordenadas X e Y

inclinar

Como o nome sugere, inclinação é inclinar o objeto e o parâmetro é o grau.

matriz

transform suporta transformação de matriz, que consiste em reposicionar elementos com base nas coordenadas X e Y

Vamos dar uma olhada mais profunda em cada recurso.

Girar

O atributo transform tem muitos usos, um dos quais é traduzir (rotação). Traduzir gira um objeto com base no ângulo e pode ser usado para elementos embutidos e elementos em nível de bloco. Ele pode obter efeitos interessantes.

Observe que no IE8 (modo não padrão) é necessário escrever "-ms-filter" em vez de "filter".

Suporte ao navegador

O suporte do navegador para tradução é surpreendentemente amplo. No trecho CSS acima, simplesmente adicionamos os prefixos -webkit- e -moz- e giramos o elemento #nav -90 graus.

Muito simples, certo? O único problema é que, para um elemento de design bastante importante, se o IE não o suportar, muitos designers relutarão em usá-lo.

Felizmente, o IE possui um filtro para isso: o filtro de rotação de gráficos. Pode ter 4 valores de rotação: 0, 1, 2 e 3. Você não obterá o mesmo controle granular que o Webkit e o Gecko, mas pelo menos será um pouco consistente (mesmo com o IE6). Embora este filtro suporte apenas 4 valores, o que parece um pouco inútil, para o IE é melhor que nada.

escala

A escala não funciona como você pensa: ela simplesmente diminui e amplia um elemento. A função de zoom assume valores de largura e altura, que podem ser positivos, negativos ou decimais.

Valores positivos ampliam um elemento, como seria de esperar, com base na largura e altura especificadas.

Valores negativos não encolhem o elemento, mas invertem-no (por exemplo, o texto é invertido) e dimensionam-no de acordo. No entanto, você pode reduzir ou reduzir um elemento usando um número decimal menor que 1 (por exemplo, 0,5).

Suporte ao navegador

O atributo de escala é atualmente suportado apenas pelo Firefox, Safari e Chrome, e até agora nenhuma versão do IE o suporta. Dimensionar um objeto é uma escolha de design bastante significativa. Pode ser usado através de aprimoramento progressivo:hover, o que pode adicionar um pouco de interesse à sua navegação.