Juntamente com a introdução do CSS3, há muitos recursos novos disponíveis para uso na criação de ótimos efeitos; uma das mais úteis é a propriedade de transição .
A propriedade de transição é um novo desenvolvimento importante no CSS. Ele pode ser usado para criar um efeito de mudança dinâmica em uma div ou classe usando uma estrutura simples:
transition: property duration timing-function delay;A transição do CSS3 é uma ótima maneira de adicionar um pouco de animação a sites sem a grande sobrecarga de uma biblioteca JavaScript como o jQuery.
Antes de começarmos, você pode ver uma demonstração aqui a propriedade de transição em ação .
Em primeiro lugar, para que a propriedade de transição funcione, a propriedade padrão à qual ela será aplicada precisa ser definida. Indiscutivelmente as duas propriedades mais comuns que serão definidas são largura e altura. Para escrever a propriedade autônoma, basta usar:
transition-property: define propertyEm seguida, depois que a propriedade for definida, os valores inicial e final precisam ser atribuídos. No caso de valores como largura ou altura, a propriedade precisa ser definida com um valor inicial e, em seguida, um valor final com alguma outra condição.
Por exemplo, aqui definimos a propriedade de transição como largura, depois o valor inicial de largura e depois definimos o valor final quando o elemento é passado por cima:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Agora que definimos a propriedade para transformar os valores inicial e final, precisamos definir a duração da transição. Isto é conseguido definindo um comprimento em segundos ou milissegundos como abaixo:
transition-duration: duration;Criando isso no exemplo, o seguinte código é criado:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Isso significa que o div do mainheader expandirá em 25px em uma duração de 5 segundos.
O código é suficiente para criar um bom efeito, no entanto, podemos utilizar ainda mais a propriedade de transição CSS3 usando a função de temporização. Usando esta propriedade, é possível alterar a curva de velocidade da duração da transição. A propriedade de transição é definida como uma curva linear por padrão. No entanto, você pode definir facilidade, facilidade de entrada, saída fácil, facilidade de saída e até mesmo bezel cúbico para alterar a curva de velocidade. Cubic-bezier permite que você defina seus próprios valores usando (n, n, n, n) onde n pode estar entre 0 e 1 (por exemplo linear seria (0,0,1,1)).
Adicionar este código aos nossos resultados de exemplo em:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Além disso, muito parecido com a duração da transição, o uso da propriedade transition-delay define uma pausa antes do início do efeito de transição:
transition-delay: time;Finalmente, é importante considerar duas coisas ao usar a propriedade de transição CSS3. Em primeiro lugar, a maioria dos navegadores em circulação no momento exigem um prefixo de navegador para usá-lo (as exceções são IE10, Opera e Firefox16 +):
-moz-transition: para o Firefox 15
-webkit-transition: para o Chrome e o Safari
(Tenha em mente que o IE9 e inferior não suporta a propriedade de transição.)
Em segundo lugar, embora eu tenha usado a mão longa nos exemplos acima para maior clareza, é considerado uma boa prática escrever de forma resumida, da seguinte maneira:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}Use a propriedade de transição do CSS3? Como se compara com os tweens baseados em jQuery? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem em movimento via Shutterstock.