CODEWITHSUNDEEP
cssanimationcss-transitions
Jens Neubauer
Jens Neubauer

Reputation: 1090

Staggered animation of properties

I'm trying to animate a slide-in menu with an underlying overlay fading in and out as the menu slides. For sliding in, this is no problem, the overlay just pops in, and I just animate the background change at same rate as the menu slides.

For sliding out animation, however, I have to keep the background overlay visible until the fade has completed. So I assumed I could just delay the change to the left property while the background change animates. That does not work though, the background disappears instantly.

The CSS in use:

div#main-menu {
  position: fixed;
  z-index: 20;
  background-color: #ccc;
  color: #fff;
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
  top: 0;
  width: 25%;
  height: 100%;
  left: -25%;
}

div#menu-overlay {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  border: 2px solid green;
}

body.menu-open div#main-menu {
  left: 0;
}
body.menu-open div#menu-overlay {
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: background 1.5s;
}
body:not(.menu-open) div#menu-overlay {
  left: -100%;
  background: rgba(0, 0, 0, 0);
  transition: left 0 linear 1.5s;
  transition: background 1.5s linear 0;
}

(The green border around the overlay is just there to keep track of it while it is transparent.)

What am I doing wrong here?

And here is a fiddle: http://jsfiddle.net/K3e4U/4/

Upvotes: 0

Views: 351

Answers (1)

Karl Michael Linantud
Karl Michael Linantud

Reputation: 127

change 

transition: left 0 linear 1.5s;
transition: background 1.5s linear 0;

to

transition: left 0 linear 1.5s, background 1.5s linear 0;

if you look at the inspector view, transition: left 0 linear 1.5s; is being cancelled out because you declare another transition.

Upvotes: 1

Related Questions