Como criar transições com CSS 3

CSS 3 lhe dá muitos recursos interessantes para criar efeitos interessantes no design do seu site para a exibição no iPad e iPhone. As propriedades de transição CSS 3 permitem alterar o estado de um elemento. Usando transições, você pode fazer coisas como alterar a cor de um elemento ou fazer o texto desaparecer quando alguém bate-lo.

Usando transições, você pode causar um elemento para ampliar quando é tocado (ou clicado), mas CSS 3 tem suas limitações. Após a imagem maior é ampliada, como mostrado na figura, você não tem nenhuma maneira de fechá-lo, a menos que você combinar CSS 3 com javascript.

o webkit-transição inclui várias propriedades. (Nota: Se várias opções são especificados, cada uma é aplicada na ordem listada).:

• -webkit-transição-propriedade - Especifica que a propriedade, tais como cor do texto, a transição afeta.

• -webkit-transição-duração - Especifica o número de segundos até que a transição ocorre. A duração pode ser expresso em segundos como 1S, 2S, e assim por diante, ou em milissegundos, tais como 500 ms, 250 ms, e assim por diante.

• -webkit-transition-delay - Especifica qualquer atraso antes de uma transição começa. Por exemplo, você adicionar um atraso de três segundos, incluindo webkit-transition-delay: 3s.

• -webkit-transição-timing-function - Especifica a curva de velocidade de uma transição e permite-lhe alterar a velocidade ao longo da duração de uma transição especificando até cinco valores pré-definidos:

• facilidade - O padrão de valor cria um efeito de transição que começa lentamente, cresce rápido, e depois diminui novamente

• linear - Cria uma transição com a mesma velocidade do começo ao fim.

• ease-in - Cria uma transição que começa lentamente.

• ease-out - Cria uma transição que termina lentamente.

• aliviar-in-out - Cria uma transição que começa e termina lentamente.

• cúbico-bezier - Uma opção avançada que torna possível definir o seu próprio valores- uma função, com base na curva de Bezier que tem sido usado em computação gráfica desde 1960, utiliza uma sequência de valores numéricos de 0 a 1.