CSS3 – Criando animações com @keyframes + hover.
Estrutura do @keyframes. Com o @keyframes podemos definir o início e fim da animação, possibilitando várias combinações. Podemos montar de duas formas sendo com from e to , ou por porcentagem 10% e 100% . @keyframes anim { from {font-size: 10px;} to {font-size: 50px;} } From é o inicio da animação, e to é o fim da animação. @keyframes anim { 10% {font-size: 10px;} 40% {font-size: 20px;} 80% {font-size: 10px;} 100% {font-size: 40px;} } Usando porcentagem podemos criar etapas mais específicas, fazendo ficar maior depois menor e no final maior novamente, entre outras formas. Chamar a animação. Após o nome @keyframes vem o nome da sua animação, esse nome vamos usar para chamar a animação. .anim { animation-duration: 1s; animation-name: anim; <!-- nome --> animation-fill-mode: both; } Observe que usamos o mesmo nome tanto na chamada da class e na função css . Usando a anima