Transition item off screen on screen - html

Question

I have a div that I have positioned: absolute; and left: -250px;. When the open navbar button is clicked I want the item to slide onto page. I'm not sure what I am missing,
.drawer .drawer-content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: -280px;
overflow-y: scroll;
-webkit-transition: left 5s ease;
-moz-transition: left 1s linear;
-o-transition: left 1s linear;
transition: left 5s ease;
}
.open > .drawer .drawer-content {
left: 0;
webkit-transition: left 5s ease;
-moz-transition: left 1s linear;
-o-transition: left 1s linear;
transition: left 5s ease;
}
When I click the navbar it opens but it does not slide onto the page.

Answer 1

You also need to apply the transition properties to the .open > .drawer .drawer-content code.
.open > .drawer .drawer-content {
transition-property: left;
transition-duration: 1s;
transition-timing-function: linear;
left: 0;
}
You should consider optimizing your transition code to look more like the following:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
So in your case it'd be:
transition: left 1s linear;
Finally, don't forget to use the browser prefixes:
-webkit-transition: left 1s linear;
-moz-transition: left 1s linear;
-o-transition: left 1s linear;
transition: left 1s linear;

Answer 2

Css should look more like this:
.drawer {
position: relative;
width: 100%;
height: 100%;
}
.drawer .drawer-content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: -280px;
transition: all ease-in-out 3s;
-moz-transition: all ease-in-out 3s;
-webkit-transition: all ease-in-out 3s;
}
.open > .drawer .drawer-content {
left: 0;
}
You dont need to set transition to .open ... .drawer-content. It should be only in mail declaration for this element.
Also you dont need overflow-y for .drawer-content. Maybe overflow-x for body is enough?:)
I don't think taht it's proper to use different easing options on one element.
Cheers :).