誇張された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緩和の、あなたのような何かを行うことができます。