Propiedades CSS de las animaciones

Los efectos de entrada y hover de Fancy Animations consiguen su resultado con un puñado de propiedades CSS distintas. Saber cuál usa cada animación explica tanto por qué algunas combinaciones chocan (ver Combinar animaciones) como si una animación es segura de usar en un elemento concreto — transform y clip-path pueden chocar con un diseño que el elemento ya tenga (un transform que hayas puesto en otro sitio, una máscara clip-path, un antecesor 3D con preserve-3d), y las que se basan en pseudoelementos necesitan un elemento que pueda tener ::before/::after (no un <img> a secas — ver Restricciones con imágenes).

Animaciones que usan transform

Animación	Qué hace
Zoom	Escala el elemento hacia dentro o hacia fuera
Slide	Desliza el elemento desde una dirección
Rotate	Gira el elemento alrededor de un punto
Bounce	Cae en su sitio con un rebote elástico

Animaciones que usan position: relative

Animación	Qué hace
Slide relative	Como Slide, pero la distancia es un porcentaje del viewport, no del elemento — pensada para emparejarse con otra animación de transform sin que las dos compitan por la misma propiedad

Animaciones que usan clip-path

Animación	Qué hace
Circle	Revela el elemento a través de una máscara circular que crece
Sweep	Revela el elemento con un barrido
Fan	Revela el elemento con un barrido en forma de abanico

Animaciones que usan box-shadow

Animación	Qué hace
Ring	Un anillo que se expande y se desvanece hacia fuera del elemento

Animaciones que usan ::before / ::after

Animación	Qué hace
Border	Una línea que recorre el propio borde del elemento, en bucle continuo

Estas son las únicas clases de entrada/hover con esta restricción — todo lo demás de las tablas de arriba es seguro en cualquier elemento, incluidas las imágenes.