Miguel Rodríguez hace desarrollo de software efectivo.

Exhibición CSS3: menú desplegable revisitado

Este artículo está basado en "Botones y menús con animaciones solo con CSS3".
El comportamiento de los efectos puede no ser mostrado de la misma manera por cada navegador.
Requisitos:
 
  • Deberías saber cosas básicas de HTML
  • Deberías saber cosas básicas de CSS y de animaciones CSS3
En este artículo vamos a mostrar algunas animaciones CSS3 basadas en un menú desplegable en el que trabajamos antes así como la explicación de cada uno, estas animaciones fueron construidas usando CSS3 2d transforms, de hecho, esta es una simple vía para mostrar las cosas grandiosas que puedes hacer con la tecnología web de próxima generación.
 

Antes de empezar

 
Antes de mostrar algo debemos saber cómo y dónde las animaciones van a ser implementadas, el método es bastante similar al método usado para crear el menú desplegable, así:
  1. ul.menu li:hover ul, ul.menu li ul li:hover ul{
  2. display:block;
  3. animation:effect 1.5s;
  4. -webkit-animation:effect 1.5s;
  5. -moz-animation:effect 1.5s;
  6. -o-animation:effect 1.5s;
  7. animation-play-state:running;
  8. -moz-animation-play-state:running;
  9. -webkit-animation-play-state:running;
  10. -o-animation-play-state:running;
  11. }
Vamos a mostrar las animaciones por cada combinación de la propiedad 'transform' hasta cuatro combinaciones, hay algunas otras propiedades que serán afectadas como la opacidad o el margen.
 

Rotate + Translate (Rotar + Trasladar)

 
El demo de esta animación fue publicado en JSFIDDLE.
Este efecto consiste en rotar un elemento un par de veces, pero si usamos la función "translate", el elemento se moverá mientras todavía está rotando como un satélite en órbita, si añadimos la función "scale" con una propiedad de "opacidad" el elemento rotará y crecerá mientras aparece hasta alcanzar su apariencia normal, es importante usar una sincronización "linear", si no la animación funcionará extrañamente.
Efecto rotar-trasladar del menú desplegable
Este es un efecto 'Objeto en órbita' hecho con las funciones 'rotate' & 'translate' de CSS3 transform, el objeto continuará creciendo mientras rota alrededor del centro hasta alcanzar su apariencia normal.
Atribución: 
 
  1. @keyframes rotatetranslate
  2. {
  3. 0% {transform: scale(0,0) rotate(360deg) translate(-500px,0);opacity:0;}
  4. 30% {transform: scale(0.3,0.3) rotate(0deg) translate(-200px,0);}
  5. 70% {transform: scale(0.7,0.7) rotate(-360deg) translate(-50px,0);}
  6. 100% {transform: scale(1,1) rotate(-720deg) translate(0px,0);opacity:1;}
  7. }
  8.  
  9. @-o-keyframes rotatetranslate
  10. {
  11. 0% {-o-transform: scale(0,0) rotate(360deg) translate(-500px,0);opacity:0;}
  12. 30% {-o-transform: scale(0.3,0.3) rotate(0deg) translate(-200px,0);}
  13. 70% {-o-transform: scale(0.7,0.7) rotate(-360deg) translate(-50px,0);}
  14. 100% {-o-transform: scale(1,1) rotate(-720deg) translate(0px,0);opacity:1;}
  15. }
  16.  
  17. @-moz-keyframes rotatetranslate
  18. {
  19. 0% {-moz-transform: scale(0,0) rotate(360deg) translate(-500px,0);opacity:0;}
  20. 30% {-moz-transform: scale(0.3,0.3) rotate(0deg) translate(-200px,0);}
  21. 70% {-moz-transform: scale(0.7,0.7) rotate(-360deg) translate(-50px,0);}
  22. 100% {-moz-transform: scale(1,1) rotate(-720deg) translate(0px,0);opacity:1;}
  23. }
  24.  
  25. @-webkit-keyframes rotatetranslate
  26. {
  27. 0% {-webkit-transform: scale(0,0) rotate(360deg) translate(-500px,0);opacity:0;}
  28. 30% {-webkit-transform: scale(0.3,0.3) rotate(0deg) translate(-200px,0);}
  29. 70% {-webkit-transform: scale(0.7,0.7) rotate(-360deg) translate(-50px,0);}
  30. 100% {-webkit-transform: scale(1,1) rotate(-720deg) translate(0px,0);opacity:1;}
  31. }
 

Translate + Scale (Trasladar + Escalar)

 
El demo de esta animación fue publicado en JSFIDDLE.
Con esta combinación intentaremos hacer un efecto rebote, en este caso vamos a usar el eje Y de la función "translate", la función "scale" hará crecer el elemento hasta que la función "translate" alcance 0.8em en su eje Y, entonces irá a su posición y apariencia normal. Hubiéramos hecho el mismo efecto con la propiedad "margin-top".
Efecto trasladar-escalar del menú desplegable
Este es un efecto 'rebote' hecho con las funciones 'scale' & 'translate' de CSS3 transform.
Atribución: 
 
  1. @keyframes scaletranslate
  2. {
  3. 0% {transform: scale(0,0) translate(0,-1.8em);}
  4. 95% {transform: scale(1.1,1.1) translate(0,0.8em);}
  5. 100% {transform: scale(1,1) translate(0,0em);}
  6. }
  7.  
  8. @-o-keyframes scaletranslate
  9. {
  10. 0% {-o-transform: scale(0,0) translate(0,-1.8em);}
  11. 95% {-o-transform: scale(1.1,1.1) translate(0,0.8em);}
  12. 100% {-o-transform: scale(1,1) translate(0,0em);}
  13. }
  14.  
  15. @-moz-keyframes scaletranslate
  16. {
  17. 0% {-moz-transform: scale(0,0) translate(0,-1.8em);}
  18. 95% {-moz-transform: scale(1.1,1.1) translate(0,0.8em);}
  19. 100% {-moz-transform: scale(1,1) translate(0,0em);}
  20. }
  21.  
  22. @-webkit-keyframes scaletranslate
  23. {
  24. 0% {-webkit-transform: scale(0,0) translate(0,-1.8em);}
  25. 95% {-webkit-transform: scale(1.1,1.1) translate(0,0.8em);}
  26. 100% {-webkit-transform: scale(1,1) translate(0,0em);}
  27. }
 

Scale + Skew (Escalar + Sesgar)

 
El demo de esta animación fue publicado en JSFIDDLE.
Pienso acerca de este efecto como "sin forma", bueno, sería como un efecto de desvanecimiento con una inclinación involucrada, no es tan genial pero todavía es un efecto, cierto?.
Efecto escalar-sesgar del menú desplegable
Efecto escalar-sesgar del menú desplegable
Atribución: 
 
  1. @keyframes scaleskew
  2. {
  3. 0% {transform: scale(0,0) skew(90deg,0);opacity:0;}
  4. 100% {transform: scale(1,1) skew(0deg,0);opacity:1;}
  5. }
  6.  
  7. @-o-keyframes scaleskew
  8. {
  9. 0% {-o-transform: scale(0,0) skew(90deg,0);opacity:0;}
  10. 100% {-o-transform: scale(1,1) skew(0deg,0);opacity:1;}
  11. }
  12.  
  13. @-moz-keyframes scaleskew
  14. {
  15. 0% {-moz-transform: scale(0,0) skew(90deg,0);opacity:0;}
  16. 100% {-moz-transform: scale(1,1) skew(0deg,0);opacity:1;}
  17. }
  18.  
  19. @-webkit-keyframes scaleskew
  20. {
  21. 0% {-webkit-transform: scale(0,0) skew(90deg,0);opacity:0;}
  22. 100% {-webkit-transform: scale(1,1) skew(0deg,0);opacity:1;}
  23. }
 

Manipulación de hijos con los nuevos selectores CSS3

 
Así que, que tiene esto que ver con el tema en discusión, bueno, hay nuevos selectores CSS3 que te permiten establecer propiedades para cada elemento hijo, por tanto, si establecemos la animación a cada botón y no al menú en sí mismo, podemos crear un efecto en cadena al sobrescribir el tiempo de animación por defecto a cada hijo con el selector apropiado. Declararíamos la animación a cada hijo y no al menú así:
  1. ul.menu li:hover ul, ul.menu li ul li:hover ul{
  2. display:block;
  3. /*NO ESTABLESCAS NINGÚN EFECTO AQUÍ!!*/
  4. }
  5.  
  6. ul.menu li:hover ul li a, ul.menu li ul li:hover ul li a{
  7. animation:effect 1.5s;
  8. -webkit-animation:effect 1.5s;
  9. -moz-animation:effect 1.5s;
  10. -o-animation:effect 1.5s;
  11. animation-play-state:running;
  12. -moz-animation-play-state:running;
  13. -webkit-animation-play-state:running;
  14. -o-animation-play-state:running;
  15. }
En esta sentencia estaríamos declarando la animación y el tiempo por defecto para efectuar la animación, a fin de sobrescribir este tiempo dependiendo del orden de cada hijo, una sentencia por cada hijo con el selector apropiado debe ser establecida:
  1. ul.menu li:hover ul li:first-child a, ul.menu li ul li:hover ul li:first-child a{
  2. animation-duration:1s;
  3. -moz-animation-duration:1s;
  4. -webkit-animation-duration:1s;
  5. -o-animation-duration:1s;
  6. }
  7.  
  8. ul.menu li:hover ul li:nth-last-child(2) a, ul.menu li ul li:hover ul li:nth-last-child(2) a{
  9. animation-duration:1.8s;
  10. -moz-animation-duration:1.8s;
  11. -webkit-animation-duration:1.8s;
  12. -o-animation-duration:1.8s;
  13. }
  14.  
  15. ul.menu li:hover ul li:nth-child(2) a, ul.menu li ul li:hover ul li:nth-child(2) a{
  16. animation-duration:1.2s;
  17. -moz-animation-duration:1.2s;
  18. -webkit-animation-duration:1.2s;
  19. -o-animation-duration:1.2s;
  20. }
  21.  
  22. ul.menu li:hover ul li:last-child a, ul.menu li ul li:hover ul li:last-child a{
  23. animation-duration:2s;
  24. -moz-animation-duration:2s;
  25. -webkit-animation-duration:2s;
  26. -o-animation-duration:2s;
  27. }
El tiempo de animación de algunos hijos están siendo reescritas es esta sentencia dependiendo en el tiempo por defecto de la animación y en el orden de los hijos, especialmente el primero, segundo, penúltimo y último hijo, el tiempo por defecto es 1.5s, así el tiempo por cada hijo fue establecido dependiendo de este valor, si fueramos a cambiar al primer hijo entonces el valor sería 1s, si fuéramos a cambiar el último hijo entonces el valor sería 2s, esos son valores relativos al tiempo por defecto, se consiente de que la animación va a durar el valor más alto establecido (en este caso 2s), esto dispararía la animación de cada hijo casi consecutivamente.
 

Rotate + Scale (Rotar + Escalar)

 
El demo de esta animación fue publicado en JSFIDDLE.
Podemos hacer muchas cosas con estas dos funciones, específicamente si el objeto es rectangular, si es así, podemos rotar el objeto a 90 grados y encogerlo con la función "scale", entonces lo haríamos voltearse a su etapa normal mientras crece, durante la animación hacemos que el elemento se quede a la izquierda hasta que alcance su apariencia normal, esto hará que el elemento encogido se ajuste a su altura normal, el efecto en cadena de esta animación se ve genial (una opinión personal).
Efecto rotar-escalar del menú desplegable
Este es un efecto de 'desvanecimiento' con un objeto encogido, rotado a 90 grados, trabaja mejor con objetos rectangulares.
Atribución: 
 
 
Efecto rotar-escalar del menú desplegable (consecutivo)
Un efecto en cadena puede ser hecho al sobrescribir el tiempo de animación por defecto para hijos en específico.
Atribución: 
 
  1. @keyframes rotatescale
  2. {
  3. 0% {transform: scale(0,0) rotate(90deg); margin-left:-3.8em;}
  4. 100% {transform: scale(1,1) rotate(0deg); margin-left:0em;}
  5. }
  6.  
  7. @-o-keyframes rotatescale
  8. {
  9. 0% {-o-transform: scale(0,0) rotate(90deg); margin-left:-3.8em;}
  10. 100% {-o-transform: scale(1,1) rotate(0deg); margin-left:0em;}
  11. }
  12.  
  13. @-moz-keyframes rotatescale
  14. {
  15. 0% {-moz-transform: scale(0,0) rotate(90deg); margin-left:-3.8em;}
  16. 100% {-moz-transform: scale(1,1) rotate(0deg); margin-left:0em;}
  17. }
  18.  
  19. @-webkit-keyframes rotatescale
  20. {
  21. 0% {-webkit-transform: scale(0,0) rotate(90deg); margin-left:-3.8em;}
  22. 100% {-webkit-transform: scale(1,1) rotate(0deg); margin-left:0em;}
  23. }
 

Translate + Scale (Trasladar + Escalar, efecto en cadena)

 
El demo de esta animación fue publicada en JSFIDDLE.
El efecto rebote también puede ser establecido a cada hijo, se ve bastante bien (una opinión personal), simplemente establece la animación a cada hijo y sobrescribe el tiempo por defecto a los hijos específicos como antes, incluso puedes hacer lo mismo con el resto de las animaciones, pero, desafortunadamente, no se verá bien.
Efecto escalar-trasladar del menú desplegable
El efecto en cadena también puede ser aplicado al efecto rebote.
Atribución: 
 
 

Últimas palabras

 
Usar "2d transforms" está altamente recomendado, está soportado por un gran número de navegadores, y tiene un mejor soporte que 3d transforms (de todos modos, si todavía quieres usarlo no te culparé), también puedes intentar hacer efectos con otras propiedades como el ancho y altura, solo recuerda probar si algo sale mal.

About me

Acerca del autor
Miguel Rodríguez es un desarrollador freelance de Caracas - Venezuela, es una persona persistente y orientada a metas que trata de hacer el mejor uso de sus recursos, es lo suficientemente positivo, proactivo y motivado como para plantear una meta con intenciones de cumplirla, encuentra más sobre él .