O CSS3 vem pra ajudar a todos. Para o desenvolvedor, a vida fica mais fácil pois é possível chegar a efeitos, que antes precisavam de uma volta gigantesca, de uma forma bem mais simples; e o usuário que pode ganhar uma experiência melhor e mais rápida.

Transition

Um dos caras que fazem do CSS3 um negócio tão bacana é a propriedade transition. Ao pé da letra e de um jeito bem direto, essa propriedade define como será a transição entre dois estilos.

Dois estilos? Ahn? Admito que não sei se estilo é a palavra correta, mas pra ficar com algo mais concreto, você pode definir, por exemplo, como vai ser a transição de um elemento:

• na troca de uma classe;
• nos estados :hover ou :focus.

O que a propriedade transition faz é analisar a diferença de valores da(s) propriedade(s) do elemento entre os dois estados/estilos e faz com que a transição aconteça de forma mais suave (pode ser customizada), e não de forma brusca como estamos acostumados.

See the Pen Simple transition by Raphael Fabeni (@raphaelfabeni) on CodePen.

Como faz?

É bem tranquilo! São 4 propriedades que você tem que definir:

• transition-property => a propriedade que você vai aplicar à transição (se quiser aplicar a todas, você pode passar o valor all);
• transition-duration => quanto tempo vai demorar a transição;
• transition-delay => tempo que a transição vai demorar pra se iniciar (pode ser omitido, e seu valor default é 0);
• transition-timing-function => como a transição vai progredir no tempo. Aceita os valores linear, ease-out, ease-in, ease e uma função personalizada através da cubic-bezier() (essa propriedade também pode ser omitida e seu valor default é ease).

Antes que você pergunte: não, você não precisa escrever uma por uma, você pode optar pelo shortcode transition:

transition: property duration delay timing-function;

Dessa maneira, as variações abaixo têm o mesmo efeito:

.classe {
    transition-property: all;
    transition-duration: 1s;
    transition-delay: 0s;
    transition-timing-function: ease;
}

.classe { transition: all 1s; }

Encadeamento de transições

Pode ser que você queira mais de uma transição em um elemento. Nesse momento, você tem duas opções distintas:

• passar all para transition-property, assumindo que as transições terão a mesma duração, delay e timing-function;
• ou passar transições diferentes para cada propriedade, podendo brincar com as propriedades específicas de transition para cada uma.

No exemplo abaixo, o primeiro retângulo tem a transition-property definido como all, o que faz que tanto a transição de largura como a de background tenham as mesmas características de duração, delay e timing-function. Já no segundo retângulo, as transições são encadeadas: a primeira transição que é a de largura ocorre, e só depois de finalizada é que acontece a transição de background. Isso acontece, pois esta última tem um delay de .3 segundos, que é o mesmo tempo de duração da primeira transição.

See the Pen Simple transition (multiple) by Raphael Fabeni (@raphaelfabeni) on CodePen.

Dicas e suporte

Em relação ao suporte, segundo o site do Can I Use, funciona a partir do IE10 e, dependendo da versão de algum navegador, você talvez precise dos prefixos.

A princípio, pode parecer algo muito simples, mas com criatividade é possível fazer coisas bem legais e poderosas.

Algum tempo atrás, criei um repositório no GitHub chamado Lab CSS3 com o objetivo de estudar um pouco mais e montar uns exemplos usando CSS3. Tem algumas coisas utilizando transition como este componente de abas e este accordion. Há algumas outras coisas sobre animation e transform, que pretendo abordar nos próximos artigos.

Conferência CSS Brasil

Já que estamos falando de CSS, este ano vai rolar a Conferência CSS Brasil, a primeira conferência nacional focada em CSS. A ideia do evento é compartilhar conhecimento e mostrar o poder do CSS. E aí, bora? #dica: Em parceria com a comunidade css3br do Facebook, tá rolando um cupom de desconto => divulgacss3br. \o/

Gostou? Escrevi alguma groselha? Quer melhorar? Abra uma issue com a hashtag 1postperweek e vamos conversar.

***

Artigo publicado originalmente em: http://www.raphaelfabeni.com.br/css-transition/