CSS Cubic Bezier გენერატორი

მრუდი მიდის ქვედა მარცხენა კუთხიდან (დასაწყისი) ზედა მარჯვენა კუთხემდე (დასასრული), სადაც დრო მიედინება მარცხნიდან მარჯვნივ, ხოლო პროგრესი — ქვემოდან ზემოთ. ორი სახელური არის მართვის წერტილები, რომლებიც ღუნავს მას — თითოეულს აქვს X და Y კოორდინატი, ამიტომ ერთად ისინი ქმნიან cubic-bezier(x1, y1, x2, y2) მნიშვნელობას. X ყოველთვის რჩება 0-სა და 1-ს შორის, ხოლო Y შეიძლება გასცდეს ზედა ან ქვედა ზღვარს, რათა შექმნას გადაჭარბების ან უკან დახევის ეფექტი საბოლოო გაჩერებამდე.

დააკოპირეთ cubic-bezier() და ჩასვით იქ, სადაც გამოიყენება ანიმაციის დროის ფუნქცია — transition-timing-function, animation-timing-function, ან შემოკლებულ ჩანაწერში, მაგ. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). საკვანძო სიტყვები ease, ease-in, ease-out და ease-in-out არის უბრალოდ ფიქსირებული cubic-bezier მრუდები, ამიტომ ამ პრესეტების არჩევისას დაინახავთ მათ უკან არსებულ ზუსტ მნიშვნელობებს.

მხოლოდ ერთი მრუდით — არა. ერთ cubic-bezier-ს შეუძლია მოძრაობის წინასწარ განსაზღვრა და გადაჭარბება (overshoot) — „back“ პრესეტები სწორედ ამისთვის სცილდება საზღვრებს — მაგრამ მას შეუძლია მხოლოდ ერთი მიმართულებით იმოძრაოს და შემდეგ გაჩერდეს. Bounce (ახტომა) და ელასტიკური ეფექტები რამდენჯერმე ცვლის მიმართულებას, რასაც ერთი cubic-bezier ვერ გამოხატავს; ამისთვის საჭიროა CSS keyframes ან linear() ფუნქცია მრავალი წერტილით.