HTML5 - Transições

As transições pertencem a uma nova série de efeitos que são incorporados em HTML5 e isso pode ser ajustado com CSS3Anteriormente, este tipo de efeitos tinha que ser executado por Javascript usando uma das muitas bibliotecas e frameworks disponíveis (Mootools, Jquery, etc.), mas quando o novo padrão foi introduzido, tais efeitos foram incorporados, como transições, animações, transformações .
Usando transições
Antes de ver como usar uma transição, devemos saber o que é. Sabemos que quando aplicamos uma mudança com a propriedade : flutuar ao passar o mouse sobre o elemento, ele assume imediatamente o estilo atribuído quando o mouse está sobre ele, uma transição nada mais é do que o controle de como essa mudança será feita, ou seja, a duração da mudança, a velocidade em que vai ser realizado, a fim de obter um efeito como uma mistura entre o antigo e o novo estado.
Podemos resumir entonces que la transición es el paso de un estado a otro dentro del documento HTML y todas las propiedades con las cuales se puede hacer este cambio, en la siguiente imagen vemos un estado inicial y un estado final, la transición es lo que pasa entre ambos.
PROLONGAR
Propriedades de transição
Vamos ver as propriedades e atributos que podemos usar para fazer uma transição:

• atraso de transição: Especifica um atraso na unidade de tempo após o qual o aplicativo de efeito será iniciado.
• duração da transição: Especifica a hora em que a transição deve ocorrer.
• propriedade de transição: Especifica a qual propriedade a transição deve ser aplicada.
• função de tempo de transição: Especifica a forma como os valores intermediários serão tratados durante a execução da transição.
• transição: É o atalho com o qual podemos aplicar todas as propriedades da transição em uma única declaração CSS. Pode ser resumido da seguinte forma: transição:

Devemos enfatizar que atraso de transição Y duração da transição usar unidades de tempo como valores, então deve ser especificado com s segundos ou em mili segundos.
Vamos ver um exemplo de como fazer uma transição para um elemento em HTML5, vamos ver o seguinte código:

 Exemplo
Existem muitos tipos diferentes de frutas - existem mais de 500 variedades de banana. No momento em que adicionamos os incontáveis ​​tipos de maçãs, laranjas e outras frutas conhecidas, nos deparamos com milhares de opções.

Como podemos ver, implementamos as diferentes propriedades do elemento de transição usando o prefixo -webkit, isso nos garante que será cumprido para navegadores cromada Y Safári, para implementá-los para Raposa de fogo Y Ópera devemos também incluir os prefixos -moz e -o.
Também podemos notar que definimos o atraso em 100ms o que significa que terá um pequeno atraso antes de iniciar a transição, então toda a duração do efeito deve durar 500ms que é o que está estabelecido em duração.
Vamos ver uma imagem com todas as fases do efeito:
PROLONGAR
Como podemos ver, a transição faz com que o efeito seja aplicado gradualmente durante o tempo especificado.
Com isso, terminamos o tutorial sobre como aplicar o efeito de transição a um elemento em HTML5, devemos continuar praticando até que seja natural colocar o código necessário para que nossos documentos e páginas tenham maior dinamismo.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo