05 June 2014 09:30
CSS - ANIMATION (transition-timing-function) - Pure CSS Slide Up and Slide Down Example
Click the button below to toggle the pure CSS slider! :
/* slider in open state */
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* close it with the "closed" class */
.slider.closed {
max-height: 0;
}
A clever use of max-height allows the element to grow and shrink as needed.
1
(1 marks)
