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ção com o hover fazendo o texto entrar e sair.

Primeiro é necessário montar a estrutura HTML onde temos a div principal e a div secundaria que vai animar o texto.

<div class="limitar animar">
<div class="ani-2s sair entrar"> <!-- hover -->
<h3>texto</h3>
</div>
</div>

Preparando o CSS.

Primeira parte definir o tamanho da div.

.limitar {
width: 200px; right: 200px;
border: 1px solid;
overflow: hidden;
text-align: center;
}

Segunda parte chamar a animação de saída e manter invisível.

.animar .sair {
opacity: 0; <!-- manter invisível -->
transition: all 1.5s;

animation-name: Out-Down; <!-- chamar animação -->
}

Terceira parte chamar a animação de entrada e mostrar o texto.

.animar:hover .entrar{
opacity: 1; <!-- mostrar -->
transition: all 0.8s;

animation-name: In-Up; <!-- chamar animação -->
}

.ani-2s {
  animation-duration: 2s; <!-- tempo e velocidade -->
  animation-fill-mode: both;
}

Quarta parte criar duas animações com @keyframes onde uma entra e a outra sai.

/* entrar */

@keyframes In-Up {

from { transform: translate3d(0, 1000px, 0); /* partida */
}
to{ transform: translate3d(0, 0px, 0); /* chegada */
}
}

/* sair */

@keyframes Out-Down {

from { transform: translate3d(0, 0px, 0); /* partida */
}
to{ transform: translate3d(0, 500px, 0); /* chegada */
}
}

Resultado: passe o mouse.

texto

Abaixo mais exemplos de animação, atenção troque o nome da animação no css.

/* entrar */

@keyframes In-Left {

from { transform: translate3d(500px, 0, 0); /* partida */
}
to{ transform: translate3d(0px, 0, 0); /* chegada */
}
}

/* sair */

@keyframes Out-Left {

from { transform: translate3d(0px, 0, 0); /* partida */
}
to{ transform: translate3d(1000px, 0, 0); /* chegada */
}
}

Resultado: passe o mouse.

texto

/* entrar */

@keyframes zoomIn {
  from { transform: scale3d(0.0, 0.0, 0.0);
  }
  to { transform: scale3d(1.3, 1.3, 1.3);
  }
}

/* sair */

@keyframes zoomOut {
  from { transform: scale3d(1.3, 1.3, 1.3);
  }
  to { transform: scale3d(0.0, 0.0, 0.0);
  }
}

Resultado: passe o mouse.

texto

/* entrar */

@keyframes flipInY {
 from { transform: rotate3d(0, 1, 0, 90deg); 
  }
  to { transform: rotate3d(0, 1, 0, 0deg);
  }
}

/* sair */

@keyframes flipOutY {
 from { transform: rotate3d(0, 1, 0, 0deg);
  }
  to { transform: rotate3d(0, 1, 0, 90deg);
  }
}

Resultado: passe o mouse.

texto

Explore as combinações troque o numero de lugar ou coloque negativo, use a forma de porcentagem para criar efeitos.