Miguel Rodríguez does effective software development.

CSS3 showcase: dropdown menu revisited

The behavior of the effects may not be displayed the same way for every browser.
Requirements:
 
  • You should know some HTML basics
  • You should know some CSS basics and CSS3 animations
In this article we are going to show some CSS3 animations based on a dropdown menu that we worked on before as well as the explanation of each one, these animations were built using CSS3 2D transforms, in fact, this is just a simple way to show the greatest things that you can do with the next generation web technology.
 

Before start

 
Before showing anything we must know how and where the animations are going to be implemented, the method is pretty similar to the method used to create the dropdown menu, like this:
  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. }
We are going to show the animations by each combination of the 'transform' property up to four combinations, there are some other properties that will be affected such as the opacity or the margin.
 

Rotate + Translate

 
The demo of this animation was posted on JSFIDDLE.
This effect consist in rotating an element a couple of time, but if we use "translate" function, the element will move while it is still rotating just like a satellite in orbit, if we add a "scale" function with an "opacity" property the element will rotate and growing while appears until it reach its normal appearance, it is important to use a "linear" timing, if not the animation will perform oddly.
Dropdown menu rotate-translate effect
This is an 'object in orbit' effect made with the CSS3 transform rotate & translate functions, the object will continue growing while rotating around the center until it reaches its normal appearance.
Attribution: 
  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

 
The demo of this animation was posted on JSFIDDLE.
With this combination we will attempt to make a bounce effect, in this case we will use the Y axis of the "translate" function, the "scale" function will make grow the element until the "translate" function reach 0.8em on its Y axis, then it goes to its normal position and appearance. we would have made the same effect with the "margin-top" property.
Dropdown menu translate-scale effect
This is a 'bounce' effect made with the CSS3 transform scale & translate functions.
Attribution: 
  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

 
The demo of this animation was posted on JSFIDDLE.
I think about this effect as shapeless, well, it would be like a fade in effect with an inclination involved, it is not that great but it is still an effect, right?.
Dropdown menu scale-skew effect
Dropdown menu scale-skew effect.
Attribution: 
  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. }
 

Child manipulation with new CSS3 selectors

 
So, what does this have to do with the topic being discussed, well, there are new CSS3 selectors that let you set properties for specific child elements, so, if we set the animation to each button and not to the menu itself, we can create a chain effect by overriding the default animation time of each child with the proper selector. We would declare the animation to each child and not to the menu like this:
  1. ul.menu li:hover ul, ul.menu li ul li:hover ul{
  2. display:block;
  3. /*DON'T SET ANY EFFECT TO THE MENU!!*/
  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. }
In this sentence we would be declaring the animation and the default time to perform the animation, in order to override this time depending on the order of each child, a sentence for each child with the proper selector must be set:
  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. }
The animation time of some children are being overridden in this sentence depending on the default time of the animation and the order of the children, specifically the first, second, second last and last child, the default time is 1.5s, so the time for each child was set depending on this value, if we were going to change the first child then the value would be 1s, if we were going to change the last child then the value would be 2s, those are relative values to the default time, be aware that the animation will last the greatest value set (2s in this case), this will trigger the animation of each child almost consecutively.
 

Rotate + Scale

 
The demo of this animation was posted on JSFIDDLE.
We can do many things with these two functions, specially if the object is rectangular, if it is that so, we can rotate the object to 90deg and shrink it with the "scale" function, then we would make it turn to its normal stage while it grows, during the animation we make the element stay at left until it reaches its normal appearance, this will make the shrunk element fit its normal height, the chain effect of this animation looks awesome (a personal opinion).
Dropdown menu rotate-scale effect
This is a 'fade in' effect with a shrunk object, rotated to 90 deg, it works best with rectangular objects.
Attribution: 
 
Dropdown menu rotate-scale effect (consecutive)
A chain effect can be made by overriding the default animation time for specific children.
Attribution: 
  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 (chain effect)

 
The demo of this animation was posted on JSFIDDLE.
The bounce effect can also be set to each child, it looks pretty cool (a personal opinion), just set the animation to each child and override the default time to the specific children as before, you can even make the same with the rest of the animation, but, unfortunately, they will not look so good.
Dropdown menu scale-translate effect (consecutive)
The chain effect can be applied to the bounce effect too.
Attribution: 
 

Latest words

 
Using 2D transforms is highly encouraged, it is supported by a great number of browsers, and it has a better support than 3D transforms (anyway, if you still want to use it I will not blame you), you can also try making effects with other properties such as the width and height, just remember testing if something goes wrong.

About me

About the author
Miguel Rodríguez is a freelance developer from Caracas - Venezuela. He is a persistent and goal-oriented person who tries to make the best use of the resources. He is positive, proactive and motivated enough to set a goal with the intention to fulfill it. Find more about him .