✅ HTML5 - animações

Índice

As animações são efeitos como transições mas melhorados na sua funcionalidade, no sentido de que existe um controlo superior sobre o que pode ser feito, devido à disponibilidade de mais opções para fazer mudanças de um estilo para outro.
Propriedades de animação
Como dissemos anteriormente, as animações são transições melhoradas devido ao número de opções e propriedades que nos permitem ter um maior controle sobre elas, vamos revisar cada uma delas:

animação-atraso: Aplique um tempo específico para poder iniciar a animação depois de ativada.
animação-direção: Especifica se a animação deve ser reproduzida para trás ou em ciclos alternados.
duração da animação: Indica o intervalo de tempo em que a animação deve ser reproduzida.
animação-iteração-contagem: Indica o número de vezes que a animação deve ser repetida, podendo até colocar o valor infinito para infinitas repetições do mesmo.
nome-da-animação: Especifica o nome da animação.
animation-play-state: Permite que a animação seja pausada e depois continue a reprodução.
animation-timing-func: Especifique como os valores intermediários devem ser tratados na animação
animação: É o atalho com o qual podemos incorporar todas as propriedades da animação em uma única declaração CSS e tem a seguinte estrutura:

animação:
Agora que sabemos as propriedades disponíveis, vamos ver um código de exemplo para analisá-lo:

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.

Neste exemplo, vemos que na hora de fazer : flutuar no elemento teremos um delay de 100ms então a animação terá 500ms para realizar e será repetida infinitas vezes.
Então vemos que com o nome que demos ao aplicativo usaremos a propriedade @keyframes que é onde diremos quais elementos serão animados.
Vamos ver como deve ser a aparência em nosso navegador:

PROLONGAR

Como vemos que há uma mudança no fundo do elemento, então a cor da letra e o tamanho da fonte, no final da animação ele retorna ao estado inicial e todo esse processo é repetido novamente, isso lhe dá um movimento que não existe com o uso de transições.
Com isso também demonstramos a importância do nome da animação uma vez que funciona como o identificador para poder atribuir-lhe um @keyframes.
Com isso finalizamos o tutorial e com isso já podemos realizar animações básicas, a fim de dar mais movimento aos nossos documentos. HTML.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo