I am trying to make a dropdown effect for one of my background images. I was able to do it using css3 but it's not plete.

The effect is supposed to be a curtain that drops down then sort of bounces back up a little. The problem with css3 is that I don't know how to do to transitions on the same property because the last one overrides the previous ones.

Here's my code:

ul#nav li a {
  /* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */
  background: url(images/drape2.png) 0px -149px no-repeat;
  /* CSS3 transitions */         
  -moz-transition: all 200ms ease-in-out;         
  -webkit-transition: all 200ms ease-in-out;         
} 

ul#nav li a:hover {            
  /* Action to do when user hovers over links */                          
  background-position: 0px 0px; /* make drape appear, POOF! */             
  background-position: 0px -10px; /* make drape appear, POOF! */             
}            

Any help would be much appreciated.

I am trying to make a dropdown effect for one of my background images. I was able to do it using css3 but it's not plete.

The effect is supposed to be a curtain that drops down then sort of bounces back up a little. The problem with css3 is that I don't know how to do to transitions on the same property because the last one overrides the previous ones.

Here's my code:

ul#nav li a {
  /* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */
  background: url(images/drape2.png) 0px -149px no-repeat;
  /* CSS3 transitions */         
  -moz-transition: all 200ms ease-in-out;         
  -webkit-transition: all 200ms ease-in-out;         
} 

ul#nav li a:hover {            
  /* Action to do when user hovers over links */                          
  background-position: 0px 0px; /* make drape appear, POOF! */             
  background-position: 0px -10px; /* make drape appear, POOF! */             
}            

Any help would be much appreciated.

• javascript
• html
• css
• html5-animation

• stackoverflow./questions/7825509/css3-chain-animations – Theo.T Commented Nov 26, 2011 at 2:50
• 3 What's the difference between an animation and a transition? – Free Lancer Commented Nov 26, 2011 at 2:58
• Ha, didn't even realise ! Well, just discovered something good here. webkit/blog/324/css-animation-2 – Theo.T Commented Nov 26, 2011 at 3:02

2 Answers 2

You'll want to chain them with mas instead of a new line

For instance:

background-color 500ms linear, color 500ms linear;

Using cubic-bezier like this:

cubic-bezier(0, 0.35, .5, 1.3)

You can make an animation go backwards—or bounce a little.

Demo (Only works in Firefox)

Source

Edit: I also made you a Webkit only option, I don't know how patible these two techniques are. It may also work in Firefox with the -moz browser prefixes, but I haven't tested it. This one uses keyframe animation as opposed to transitions.