Primeiros passos com transformações CSS3

Traduzido de: transições CSS 101
Chinês: Introdução às transformações CSS3
Autor original: Jason Cranford Teague
Tradutor: Shen Fei
Por favor, respeite os direitos autorais e indique a fonte ao reimprimir, obrigado!

Embora as pessoas esperem algumas mudanças na tela, CSS e HTML podem fazer muito pouco pela interação na página, e ainda precisam ser implementadas no código.

Por exemplo, um link é desta ou daquela cor; uma área de texto é deste ou daquele tamanho; uma imagem é transparente ou opaca, eles mudam diretamente de um estado para outro - no meio .

Isso faz com que a maioria das páginas da web seja um tanto rígida, já que os elementos apenas mudam ou mudam de forma rígida.

Sim, você pode exagerar usando DHTML, jQuery ou escrevendo seu próprio JS, mas isso requer mais código para implementar o que deveria ser uma funcionalidade muito simples.

O que precisamos é de uma maneira rápida e fácil de adicionar efeitos de transição simples à página. Neste artigo, você encontrará informações úteis sobre transições CSS e como usá-las.

Há alguns meses, sugeri que os designers deveriam começar a usar as novas tecnologias CSS 3 para obter algumas funcionalidades básicas que desejavam há muito tempo - o único problema era que nenhuma dessas tecnologias estava disponível no IE, incluindo o IE8.

A visão de que alguns leitores acreditam que essas tecnologias serão invisíveis para 75% dos usuários não é confiável.

Para os leitores por aí, quero dizer: "Aguentem firme", porque estou prestes a apresentar outra nova propriedade CSS que permite adicionar efeitos interessantes de transformação a qualquer elemento com apenas algumas linhas de código.

As transformações CSS foram introduzidas recentemente no CSS 3, mas foram adicionadas como uma extensão do webkit. Ou seja, agora eles só podem ser usados ​​em navegadores baseados em webkit, incluindo Apple Safari e Google Chrome. No entanto, a julgar pela versão pré-Alpha do Opera 10.5, o Opera suportará transformações CSS 3 na próxima versão 10.5. Portanto , para ver os efeitos reais mencionados neste artigo, é altamente recomendável que você use o Chrome ou Safari 4 para visualizar este artigo .

As transformações costumavam ser apenas parte do Webkit e a base para algumas coisas interessantes que a UI do Safari podia fazer e que outros navegadores não conseguiam.

No entanto, o Grupo de Trabalho CSS do W3C recusou-se a adicionar transformações aos seus recursos oficiais, com alguns membros insistindo que as transformações não são propriedades CSS e seriam melhor tratadas através de scripts. (Estou cheio de confiança. Tive um ponto de vista semelhante no parágrafo anterior e discuti isso com Gao Gao . Acho que a animação CSS está além do escopo do desempenho. Coisas interativas devem ser implementadas com scripts. Mas mais tarde, sob o orientação do irmão Gui , comecei com um novo entendimento - Shen Fei)

Mas muitos designers e desenvolvedores, inclusive eu, insistem que esses são de fato estilos - apenas estilos dinâmicos , em vez dos estilos estáticos tradicionais que usamos todos os dias.

Felizmente, o debate sobre estilo dinâmico é coisa do passado. Em março passado, representantes da Apple e da Mozilla começaram a adicionar módulos de transformação CSS aos recursos do CSS 3 , muito próximos do que a Apple já havia adicionado ao WebKit.

Antes de continuarmos, deixe-me enfatizar isto: nunca faça com que a funcionalidade de um site dependa de um estilo se o estilo não for universal para navegadores (ou seja, suportado por todos os navegadores comumente usados).

Para quem perdeu, enfatizo mais uma vez: Nunca deixe que a funcionalidade de um site dependa do estilo, se o estilo não for universal entre navegadores .

Dito isso, você pode usar estilos, como transformações, como melhorias de design para melhorar a experiência do usuário, sem sacrificar a usabilidade para usuários que não podem vê-los. Se funcionar sem transformações CSS e os usuários ainda puderem concluir suas tarefas, tudo bem e você poderá usar transformações CSS.