Con el siguiente ejemplo conseguimos tener elementos que aparecen al posicionar sobre ellos con el ratón y desaparecen al quitar el ratón.

Empezaremos por ver el css, donde crearemos las propiedades de animación de una clase llamada (at) animación transparente:

/*lo que tiene que hacer al pasar
sobre el elemento.*/

.at:hover{
/*Firefox*/
/*función animación a la que llamamos*/
-moz-animation-name: aparece;
/*duración de la misma*/
-moz-animation-duration: 1s;
/*veces que debe repetirse la animación*/
-moz-animation-iteration-count: 1;
/*posición en la que dejamos la animación, al final*/
-moz-animation-fill-mode: forwards;
/*le devolvemos su tamaño original*/
-moz-transform: scale(1,1);
}

/*lo que tiene que hacer cunado no
estamos sobre el elemento.*/

.at{
/*Firefox*/
/*función animación a la que llamamos*/
-moz-animation-name: desaparece;
/*duración de la misma*/
-moz-animation-duration: 2s;
/*veces que debe repetirse la animación*/
-moz-animation-iteration-count: 1;
/*posición en la que dejamos la animación, al final*/
-moz-animation-fill-mode: forwards;
/*aplicamos un escalado de la mitad para dar efecto de crecimiento*/
-moz-transform: scale(0.5,0.5);
/*tiempo en el que cambia de 1 a 0.5*/
-moz-transition-duration: 0.5s;
}

/*Las dos funciones aparece desaparece
pasan al objeto de una opacidad de 0 a 1 y viceversa*/
@-moz-keyframes aparece /*Firefox*/
{
from {
opacity:0;
}
to {
opacity:1;
}
}

@-moz-keyframes desaparece /*Firefox*/
{
from {
opacity:1;
}
to {
opacity:0;
}
}

Ahora a cada elemento que le asignemos la clase “at” tendrá la propiedad de aparecer y desaparecer.