과장된 CSS 손쉬운 높이 전환

Question

this website의 드롭 다운 메뉴 전환에서 볼 수있는 과장된 손쉬운 높이 전환을 어떻게 얻을 수 있습니까? Normal CSS transitions은 훨씬 선형이어서 내가 여기 렌더링 된 것을 볼 수 있습니다. 감사!

Answer 1

Cubic Bezier timing functions을 사용하여 나만의 맞춤형 이징을 정의 할 수 있습니다. 자신의 이징 당신이 cubic-bezier.com을 시도 할 수 있도록 사용하기 쉬운 도구

.selector { 
    transition: right .5s cubic-bezier(.55,.04,.27,.91); 
} 

: 예를 들어

대신 표준 linear 완화, 당신은 뭔가를 할 수 있습니다.