Site Overlay

Animações e transações de estilo via CSS

Uma das partes mais interessantes do CSS 3 diz respeito a quantidade de efeitos que conseguimos criar apenas com CSS combinando algumas propriedades novas – transform, transition e animation. Sem eles, todos esses efeitos e animações de encher os olhos costumam ser feitos por bibliotecas de JavaScript como o jQuery ou o via scripts diferenciados. Além dessa dependência adicional, problemas de performance e de renderização de elementos costumam surgir em navegadores antigos ou ao trabalhar com elementos complexos. Passando a responsabilidade de todo o trabalho pesado para os navegadores, conseguimos efeitos de maior qualidade com uma taxa menor de bugs.

Apesar do suporte experimental, pois no momento todos as três propriedades citadas precisam ser usadas com prefixos específicos para cada navegador que as suportam, diversos sites e aplicativos usam esses recursos para efeitos sensacionais, sendo alguns deles os sites do último modelo do iPhone e do Google Nexus e a interface web do Twitter. Não há razão para se ter medo ou receio em usar os recursos de animação em seus projetos.

Vamos começar com transformações em duas dimensões. A propriedade transform aceita diversas funções de efeitos diferentes definidos pela especificação da W3C, tais como:

  • translate: utilizado para reposicionar um elemento, movendo sua posição no eixo X e Y pelos valores informados;
  • scale: utilizada para redimensionar um elemento, aceitando valores referentes ao tamanho do elemento – scale(2), por exemplo, dobrará o tamanho de um elemento;
  • skew: permite distorcer as posições de um elemento, esticando e torcendo de acordo com os valores informados;
  • rotate: usada para rotacionar o ângulo dos elementos;
  • matrix: o mais complexo de todos, permite executar uma matriz de transformações.

As funções translate, scale e skew possuem versões X e Y, que permitem modificar apenas um eixo e não ambos de uma vez. As funções de skew e rotate trabalham com uma nova medida, graus, utilizando o sufixo deg, como em transform: rotate(90deg).

Para fins de ilustração, criaremos uma galeria de fotos:

<h1> Funcionários</h1>

<ul>

<li>

<img src=’img/luis.png’ alt=’Luis’>

<span> Luis </span>

</li>

<li>

<img src=’img/joao.png’ alt=’Joao’>

<span>João</span>

</li>

<li>

<img src=’img/lucas.png’ alt=’Lucas’>

<span>Lucas</span>

</li>

<li>

<img src=’img/luana.png’ alt=’Luana’>

<span>Luana</span>

</li>

</ul>

ul {

list-style: none;

padding: 0;

}

li {

float: left;

margin-left: 10px;

position: relative;

}

span {

color: #153755;

display: block;

font-weight: bold;

margin-top: 5px;

text-align: center;

}

Agora vamos girar as fotos utilizando a função rotate. Sendo que as fotos ímpares irão para um lado e as pares para outro. Utilizando o seletor de nth-child, o código para isso fica bem enxuto:

li:nth-child(even) {

transform: rotate(5deg);

}

li:nth-child(odd) {

transform: rotate(-5deg);

}

Passando um valor negativo podemos rotacionar as imagens no sentido anti-horário, enquanto valores positivos são para o sentido horário. Outro efeito que conseguimos adicionar facilmente é ao passar com o cursor por cima das fotos, aumentar o tamanho da imagem e do texto, através do uso do scale.

li:hover {

transform: scale(1.3);

z-index: 1;

}

Desta forma, a img e o span irão voltar a posição normal e ficarão 30% maiores – e o uso do z-index vai posicionar a foto em cima das demais. Podemos testar outras funções como o skew e o translate aqui, mas elas não são aplicações tão interessantes quanto o rotate e o scale no cenário proposto.

li {

transform: skew(10deg, 10deg);

}

li:nth-child(even) {

transform: translateY(10px);

}

li:nth-child(odd) {

transform: translateY(-10px);

}

Em cada caso é necessário estudar qual o melhor efeito a ser usado. O skew pode ser útil para desenhar cubos em 3D utilizando 3 elementos, e o translate é uma ótima alternativa ao uso de position: absolute junto de top e left.

Em navegadores sem suporte a transform, a galeria seria exibida da forma que ela foi criada inicialmente – sem efeitos nenhum. Caso você precise trabalhar com navegadores sem suporte, sempre teste as suas páginas sem os efeitos de transform para confirmar que elas continuam funcionais.

A propriedade transition permite a você “animar” a mudança – ou seja, a transição – entre outras propriedades dos seus elementos quando elas mudam de valor. Seja esta mudança feita através de JavaScript, alterando as classes aplicadas a um elemento, ou pelas mudanças causadas por pseudo seletores, como :focus e :hover.

Transições são uma ótima adição a interfaces já existentes, já que dependem da mudança de estado existente, como containers deslizantes e modais que aparecem e desaparecem das telas. Se você está acostumado a usar animações em JavaScript com o jQuery, por exemplo, é possível substituir o uso de funções como slideDown e fadeToggle por transições entre classes específicas para modificar a altura ou a opacidade, tornando esses efeitos mais rápidos e garantido melhor qualidade aos efeitos.

Utilizando o exemplo da galeria de fotos, vamos agora aprimorar o efeito de scale adicionado ao :hover das fotos com uma transição – e isso será absurdamente simples – basta aplicar a seguinte linha ao seletor da li:

li {

transition: transform 0.2s linear;

}

Apenas uma linha de CSS e ganhamos uma animação – mas essa linha contém bastante informação sobre o que queremos fazer. A propriedade transform é um atalho para as 4 propriedades que compõe a animação, da mesma forma como usamos margin para definir 4 margens diferentes em uma propriedade só, sendo elas:

  • transition-property: para qual propriedade a transição será aplicada. É possível utilizar o valor all para referenciar todas as propriedades do elemento;
  • transition-duration: A duração que a transição deve ter, em segundos;
  • transition-timing-function: Como a velocidade da transição deverá ser calculada, os valores mais comuns são linear, ease, ease-in, ease-out e ease-in-out;
  • transition-delay: tempo de espera que precede a transição – geralmente omitimos essa propriedade para utilizar o valor padrão dela, 0.

Com isso explicado, fica fácil entender o que a nossa definição faz: aplicamos a transição a propriedade transform, com 0.2s de duração e a transição deverá ser executada em uma velocidade linear. Apesar de existir um mar de opções possíveis que conseguimos combinar com essas propriedades, é fácil definir um padrão de valores para a duração e a velocidade e repetir os valores em diversos lugares e projetos – melhor do que se preocupar constantemente em otimizar as transições para cada uso possível.

Vamos considerar para um último exemplo um formulário padrão onde as mensagens de ajuda são exibidas conforme os campos recebem foco – e adicionar transições as mensagens. Diferente do exemplo anterior, precisamos fazer alguns ajustes ao estilo do formulário e podemos combinar transições diferentes para criar um efeito melhor.

Primeiramente, precisamos trocar a definição de display: none; das mensagens – não podemos usar essa propriedade nas nossas animações, pois elementos que estão escondidos desta forma não recebem os efeitos de transição quando mudamos o valor dela para block. Para contornar isso, precisamos esconder as mensagens de outra maneira, utilizando a propriedade opacity. Então, o CSS da classe .hint ficará assim:

.hint {

background-color: #FFFBE4;

border-radius: 3px;

border: 1px solid #CCC;

box-shadow: 1px 1px 3px rgba(0,0,0,0.2);

display: inline-block; /* Colocamos o `inline-block` de volta. */

font-size: 0.8em;

margin-left: 20px;

opacity: 0; /* Remove a opacidade do elemento para escondê-lo. */

padding: 3px;

}

No seletor para as mensagens que são exibidas no estado de :focus dos campos, vamos alterar a opacidade do elemento para exibir ele corretamente:

input:focus + .hint, textarea:focus + .hint {

opacity: 1;

}

Alteramos a forma que escondemos e exibimos a mensagem, e agora é necessário adicionar a definição da transição a ser usada.

.hint {

transition: opacity 0.5s;

}

Uma transição de meio segundo, linear, na propriedade opacity. Podemos ainda incrementar a transição, adicionando a margem lateral. Vamos mover a definição de margin-left da classe .hint para o seletor de :focus, deixando o CSS assim:

input:focus + .hint, textarea:focus + .hint {

margin-left: 20px;

opacity: 1;

}

Agora, além do opacity, a propriedade margin-left também sofrerá mudanças, e precisamos adicionar uma definição de transition para ela:

.hint {

transition: opacity 0.5s, margin-left 0.5s;

}

Por fim, podemos então ver a nova versão da nossa transição, cuja intenção é demonstrar que a mensagem está “entrando” na interface do usuário, e saindo quando outro campo recebe foco.

41

Source: scriptcase / Animações e transações de estilo via CSS

Comments

comments

Leave a Reply

Your email address will not be published.