Make CSS Transition Smooth for Bootstrap Toggle Menu

Question

I was trying to made Bootstrap Toggle Menu slide effect changed from top to bottom into left to right. This is the website : http://concepthomes.com/

So after tried many CSS codes (I prefer using full CSS for this effect), I found this one :

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

It's working, but when I clicked it, somehow the menu has "pause time", before completely opening.

Are there any ways to make the transition smoother?

=== UPDATE === So, I am using Jasny's Bootstrap (http://www.jasny.net/bootstrap/examples/navmenu/)

It has Menu slide effect called Slide In, but unfortunately it's only working for viewport below 998px. Are there any ways to 'hack' the 'offcanvas-sm' can be worked on all viewports?

Natasha Lawson · Accepted Answer · 2016-01-04 03:44:41Z

1

The transition-timing-function property is used to specify the speed curve of the transition effect.

The ease value has a slow start, then fast, then ends slowly, (equivalent to cubic-bezier(0.25,0.1,0.25,1))

Try the linear value which specifies a transition effect with the same speed from start to finish.

Then you could alter the transition-duration to make it the time length you're happy with.

http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

answered Jan 4, 2016 at 3:44

Natasha Lawson

1114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Irwan Over a year ago

I just changed it to 'linear', but it's still has "pause time".

Collectives™ on Stack Overflow

Make CSS Transition Smooth for Bootstrap Toggle Menu

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related