CSS: transition pra dar e vender

O CSS3 vem pra ajudar a todos. Pro 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 a qual você vai aplicar a transição (se quiser aplicar em 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 see 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 tem 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 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 ocorre a transição de background. Isso acontece pois essa ú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 esse componente de abas e esse accordion. Tem algumas outras coisas sobre animation e transform, que pretendo abordar nos próximos posts.

Conferência CSS Brasil

Já que estamos falando de CSS, esse ano vai rolar a Conferência CSS Brasil, a primeira conferência nacional focada em CSS. A idéia do evento é compartilhar conhecimento e mostrar o poder do CSS. Eaí.. 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.

See all posts...