[SOLUCIONADO] Como hacen animaciones "lentas" en el Menú

[Celcius]

Hola amigos, revisando una web, me percaté que tienen una animación "lenta" en el menú...

http://portraits.aol.com/

Fíjense que cuando posan el mouse sobre CREATE, ABOUT o GALLERY, existe un cambio de color en las letras, pero esta se realiza de forma lenta... cómo lo hacen?

Un saludo.

[pzin]

Puedes usar transiciones con CSS.

Un ejemplo simplón:

Código CSS:

a {
  color: blue;
  transition: color 800ms;
}
 
a:hover {
  color: red;
}
 

Puedes mirar en esta tabla la compatibilidad entre navegadores.

[Celcius]

te lo agradezco mucho... y bueno, no se si valga la pregunta, no se si te has fijado mas abajo... al bajar sucede una "animacion" como que las imágenes se van colocando y moviendo a penas visualizamos ese sector... cómo se hace eso????

Un saludo :)

[pzin]

Ahí ya envuelven al menos un poco de JavaScript para que empiece una animación de CSS cuando alcanza cierto punto haciendo scroll. Luego con animation y @keyframes se hace la animación.

Sería algo de este tipo:

Código CSS:

.animar {
  transform-origin: bottom right;
  animation: meneo 3s;
}
 
@keyframes meneo {
  from { transform: rotate(-70deg) }
  to { transform: rotate(0deg) }
}
 

Otra vez a mirar la compatibilidad.

[Celcius]

Gracias! fuiste muy gentil en ayudarme a despejar mis dudas... recibe un saludo...