Geek Answers Handbook

CSS3 Multiple Transitions of the Same Element

I am trying to create a drop down effect for one of my background images. I was able to do this with css3, but not completely.

The effect should be a curtain that drops and then bounces a little. The problem with css3 is that I don’t know how to do this for transitions on the same property, because the latter overrides the previous ones.

Here is 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 greatly appreciated.

+5
source share
2 answers

Using cubic-bezieras follows:

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

You can do the animation in reverse - or bounce a little.

( Firefox)

: Webkit, , . Firefox -moz, . , .

+4

:

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

More articles:


All Articles