- Son como funciones
- animation-duration:5s; Duración de la animación
- animation-name:cambia_color; Nombre que le pongo a la función
- animation-iteration-count:infinite;Cuántas veces se repite, es un número o infinito para dejarlo ciclado
- @keyframes cambia_color {} Entre llaves defino lo que pasa en cada porcentaje, como cambio las propiedades
- 25%, 75% {background-color:red} Si quiero que en esos porcentajes se cambie a rojo
- animation:5s cambia_color 1; se puede poner en una sola línea
- En 0% y 100% si no se dice nada, siempre estarían en el estado inicial
- En lugar de porcentajes se pone from to
- @keyframes from_to_color{from{} to{}}
- Le pongo display:inline-block; para que me acepte el vertical-align: middle;
- Los pone inline-block siempre que sean seguidos los DIV
- transform:translateY(10px) translateX(-10px); Desplazar en X y Y
- transform: scaleX(1.25) scaleY(0.75); Alargar en X y Y
- Importante que después de cada porcentaje trata de regresar a su estado si no se le indica otro
- transform-origin:top center; Le digo el punto de origen de la rotación
- transform:scale(1.1) rotate(6deg); Se pueden poner varios transform
- transform:rotate(-10deg) translateX(-25%); Se pueden poner porcentajes en las transformaciones
- Descolgado es con Activate.
- Si no indico la seudoclase cada vez que llego a la página se genera la animación como en ReboteLat
- Si es 25% es rojo y al 80% es azul, hará lo necesario para ir de rojo a completar azul
- translateX(100%); 100% sobre su tamaño
- opacity:0; totalmente transparente
- transform: translateX(-2000px); si dejo en 2000 en ReboteLat aparece el scroll vertical porque es de derecha a izquierda y se sale de la anchura de la página. Esto es porque la parte izquierda de la página no se carga pero la parte derecha si, y por eso contempla la anchura de la página y conforme reduce de 2000 se desaparece la barra de scroll
- ReboteOut, mantiene la transparencia mientras este grande
- Salida, el 100% debe ser transparente, pero en el 20% se forza que este ópaco para que tarde un poco en empezar a transparentar
- Fade Tapa es con un DIV de tapa pero solo funciona al cargar. Tapa 2 funciona sin el DIV pero cambio el P a absolute pero mueve todo lo que esta alrededor
- transform-origin:0% 100%; Se le puede indicar porcentajes, eso sería igual a left bottom