{"id":374891,"date":"2024-05-21T06:11:27","date_gmt":"2024-05-21T06:11:27","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=374891"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=374891","title":{"rendered":"<span>\u041f\u0443\u0442\u044c \u043a \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0435\u043c\u0443 CSS Easing \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 linear()<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u00ab<a href=\"https:\/\/www.smashingmagazine.com\/2023\/09\/path-css-easing-linear-function\/\" rel=\"noopener noreferrer nofollow\">The Path To Awesome CSS Easing With The linear() Function<\/a>\u00bb.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044f \u0432\u0435\u0434\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b \u00ab<a href=\"https:\/\/t.me\/frontend_pasta\" rel=\"noopener noreferrer nofollow\">Frontend \u043f\u043e\u2011\u0444\u043b\u043e\u0442\u0441\u043a\u0438<\/a>\u00bb, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0440\u043e\u00a0\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438\u0437\u00a0\u043c\u0438\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<h2>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0444\u0440\u0430\u0437\u0438\u0440\u0443\u044f \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u044b\u043b\u0430 \u0441\u043e \u043c\u043d\u043e\u0439: &#171;\u041b\u0443\u0447\u0448\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f &#8212; \u044d\u0442\u043e \u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u0435\u043d\u0438&#187;. \u041e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u043c\u043e\u0443\u0448\u043d \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432 \u0432\u0435\u0431\u0435 &#8212; \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0443\u0448\u043d &#171;\u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0441\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e&#187;. \u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f CSS \u0431\u044b\u043b \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u043d\u0435\u043d\u0430\u0432\u044f\u0437\u0447\u0438\u0432\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>\u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u0432 CSS. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u044f \u0445\u043e\u0447\u0443 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0443\u043f\u0435\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 <code>linear()<\/code> &#8212; \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 CSS Easing Level 2 \u0432 \u0440\u0435\u0434\u0430\u043a\u0446\u0438\u0438 Editor&#8217;s Draft. \u0412\u043c\u0435\u0441\u0442\u0435 \u043c\u044b \u0438\u0437\u0443\u0447\u0438\u043c \u0435\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u0440\u0438\u0432\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0442 \u043a \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c\u0443 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<p>\u0422\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e <code>linear()<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u0443\u0441\u0435 Editor&#8217;s Draft, \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u0441\u044f \u0432 \u043d\u0435\u0447\u0442\u043e, \u0447\u0442\u043e \u0435\u0449\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u043a \u0442\u043e\u043c\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 Candidate Recommendation. \u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0435\u0431\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 <code>linear()<\/code> \u0438\u043c\u0435\u0435\u0442 <a href=\"https:\/\/caniuse.com\/mdn-css_types_easing-function_linear-function\" rel=\"noopener noreferrer nofollow\">\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443<\/a>. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 Chrome \u0438 Firefox, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u043c\u0435\u0439\u0442\u0435 \u044d\u0442\u043e \u0432 \u0432\u0438\u0434\u0443, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0434\u0435\u043b\u0443, \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043f\u0430\u0440\u043e\u0439 \u0441\u0442\u0430\u0442\u0435\u0439. \u041e\u043d\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u043b\u0438 \u043d\u0430 \u043c\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043c\u043e\u0443\u0448\u0435\u043d \u0434\u0438\u0437\u0430\u0439\u043d\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>\u201c<a href=\"https:\/\/uxdesign.cc\/good-to-great-ui-animation-tips-7850805c12e5\" rel=\"noopener noreferrer nofollow\">Good to great UI animation tips<\/a>,\u201d Pablo Stanley<\/p>\n<\/li>\n<li>\n<p>\u201c<a href=\"https:\/\/medium.com\/@ruthiran_b\/disneys-motion-principles-in-designing-interface-animations-9ac7707a2b43\" rel=\"noopener noreferrer nofollow\">Disney\u2019s Motion Principles in designing interface animations<\/a>,\u201d Ruthiran Babu<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043f\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435, \u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438 \u0434\u0432\u0430 \u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u0435\u0440\u0436\u0443 \u043f\u043e\u0434 \u0440\u0443\u043a\u043e\u0439 \u0432 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0430\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0438 \u043e\u043d\u0438, \u0431\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u043f\u043e\u0432\u043b\u0438\u044f\u043b\u0438 \u043d\u0430 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e.<\/p>\n<h2>\u0422\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Easing \u0432 CSS<\/h2>\n<p>\u041c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c CSS easing \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <code>animation-timing-function<\/code> \u0438\u043b\u0438 <code>transition-timing-function<\/code>, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043b\u0438 \u043c\u044b \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>\u041d\u043e \u0434\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 CSS \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u043b \u043d\u0430\u0441 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 easing \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438:<\/p>\n<ul>\n<li>\n<p><code>linear<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>steps<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>ease<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>ease-in<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>ease-out<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>ease-in-out<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>cubic-bezier()<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u0443 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0442\u0430\u0439\u043c\u0438\u043d\u0433\u043e\u0432 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u043f\u043e \u0442\u0440\u0430\u0441\u0441\u0435.<\/p>\n<p><a href=\"https:\/\/codepen.io\/smashingmag\/pen\/PoXmRJQ\" rel=\"noopener noreferrer nofollow\">https:\/\/codepen.io\/smashingmag\/pen\/PoXmRJQ<\/a><\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f cubic-bezier() \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0421\u0430\u0439\u0442 <a href=\"http:\/\/cubic-bezier.com\" rel=\"noopener noreferrer nofollow\">cubic-bezier.com<\/a> &#8212; \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043a\u0440\u0438\u0432\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439.<\/p>\n<p>\u0422\u0430\u043a\u043e\u0432\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 CSS. \u041a \u043d\u043e\u0432\u044b\u043c \u0431\u043b\u0435\u0441\u0442\u044f\u0449\u0438\u043c \u0448\u0442\u0443\u0447\u043a\u0430\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435. \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430, \u044f \u0434\u0443\u043c\u0430\u044e, \u0441\u0442\u043e\u0438\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u043a\u0440\u0438\u0432\u044b\u0445.<\/p>\n<h2>\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0440\u0438\u0432\u044b\u0445<\/h2>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u0440\u0438\u0432\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0430. \u041d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"http:\/\/easings.net\" rel=\"noopener noreferrer nofollow\">easings.net<\/a> \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 cubic-bezier().<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0d3\/b08\/779\/0d3b0877928f7a0481c28632f44070b4.png\" width=\"2000\" height=\"1524\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0d3\/b08\/779\/0d3b0877928f7a0481c28632f44070b4.png\"\/><\/figure>\n<p>\u041a\u0440\u0438\u0432\u044b\u0435 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 Chromium DevTools, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u0443\u044e \u043a \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0443 \u0438\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/887\/ecd\/50b\/887ecd50b4619f90c2fe26a73ece786c.png\" width=\"2000\" height=\"1590\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/887\/ecd\/50b\/887ecd50b4619f90c2fe26a73ece786c.png\"\/><\/figure>\n<h2>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 &#171;\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e&#187; \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e linear()<\/h2>\n<p>\u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0435, \u0447\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u043d\u0430\u0441\u0447\u0435\u0442 \u043e\u0442\u0441\u043a\u043e\u043a\u0430? \u0418\u043b\u0438 \u043f\u0440\u0443\u0436\u0438\u043d\u0430? \u042d\u0442\u043e \u0442\u0435 \u0442\u0438\u043f\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0440\u0438\u0432\u043e\u0439 cubic-bezier().<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f linear(), <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/pull\/6533\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f <\/a><a href=\"https:\/\/twitter.com\/jaffathecake\" rel=\"noopener noreferrer nofollow\">\u0414\u0436\u0435\u0439\u043a\u043e\u043c \u0410\u0440\u0447\u0438\u0431\u0430\u043b\u044c\u0434\u043e\u043c <\/a>\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 <a href=\"https:\/\/drafts.csswg.org\/css-easing-2\/#linear-easing-function-examples\" rel=\"noopener noreferrer nofollow\">CSS Easing Level 2<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0434\u0438\u0438 Editor&#8217;s Draft. MDN \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0435\u0435:<\/p>\n<blockquote>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f linear() \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0443\u0441\u043e\u0447\u043d\u043e-\u043b\u0438\u043d\u0435\u0439\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043b\u0438\u043d\u0435\u0439\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u0443\u0435\u0442 \u043c\u0435\u0436\u0434\u0443 \u0441\u0432\u043e\u0438\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u043f\u043f\u0440\u043e\u043a\u0441\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043e\u0442\u0441\u043a\u043e\u043a\u0430 \u0438 \u0443\u043f\u0440\u0443\u0433\u043e\u0441\u0442\u0438.<\/p>\n<\/blockquote>\n<p>\u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a \u0441 \u043b\u044e\u0431\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0442\u043e\u0447\u0435\u043a \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439. \u042d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u043e \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u043d\u044c\u0448\u0435 \u043c\u044b \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u0441\u043a\u043e\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"css\">:root {   --bounce-easing: linear(     0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,     1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,     0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,     0.973, 1, 0.988, 0.984, 0.988, 1   ); } <\/code><\/pre>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438: <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/KKbmeeQ\" rel=\"noopener noreferrer nofollow\">https:\/\/codepen.io\/smashingmag\/pen\/KKbmeeQ<\/a><\/p>\n<p>\u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c, \u0447\u0442\u043e <a href=\"https:\/\/caniuse.com\/mdn-css_types_easing-function_linear-function\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 <\/a>\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430 Chrome \u0438 Firefox, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0434\u0435\u043c\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u044d\u0442\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b <a href=\"https:\/\/webkit.org\/standards-positions\/#position-130\" rel=\"noopener noreferrer nofollow\">\u0436\u0434\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e Safari<\/a>, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u0447\u0442\u0438 \u0443 \u0446\u0435\u043b\u0438!<\/p>\n<h2>&#171;\u042f \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442&#187;<\/h2>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0447\u0438\u0441\u0435\u043b, \u0432\u0437\u044f\u0442\u044b\u0445 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u0432\u043e\u0437\u0434\u0443\u0445\u0430, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438? \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0442\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u0435\u043b\u043e \u0441 \u0447\u0435\u043c-\u0442\u043e \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u044b\u043c, \u043a\u0430\u043a \u0438 <code>cubic-bezier()<\/code>. \u0425\u043e\u0440\u043e\u0448\u043e \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0432\u0430\u043c \u0432\u0440\u044f\u0434 \u043b\u0438 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u0439 \u0441\u043d\u043e\u0432\u0430&#8230; \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f. \u042d\u0442\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0435\u0449\u044c \u0442\u0438\u043f\u0430 &#171;\u0437\u0430\u0434\u0430\u043b \u0438 \u0437\u0430\u0431\u044b\u043b&#187;.<\/p>\n<p>\u041d\u043e \u043a\u0430\u043a \u043c\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0447\u0438\u0441\u043b\u0430? \u0414\u0436\u0435\u0439\u043a, \u0443\u043c\u043d\u044b\u0439 \u0447\u0435\u043b\u043e\u0432\u0435\u043a, \u0441\u043e\u0437\u0434\u0430\u0432\u0448\u0438\u0439 <code>linear()<\/code>, \u0441\u043e\u0431\u0440\u0430\u043b <a href=\"https:\/\/linear-easing-generator.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u043e\u043d\u043b\u0430\u0439\u043d-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0441\u044e \u0442\u044f\u0436\u0435\u043b\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0437\u0430 \u043d\u0430\u0441. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043e\u0442\u0441\u043a\u043e\u043a\u0430 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0414\u0436\u0435\u0439\u043a\u0430. \u0412\u043e\u0442 <a href=\"https:\/\/linear-easing-generator.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/148\/cfc\/ede\/148cfceded2fcdb924966d499f502cd8.png\" width=\"2000\" height=\"1152\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/148\/cfc\/ede\/148cfceded2fcdb924966d499f502cd8.png\"\/><\/figure>\n<h2>\u041a \u0447\u0435\u043c\u0443 \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442?<\/h2>\n<p>\u0421\u043a\u043e\u043b\u044c\u043a\u043e \u044f \u0441\u0435\u0431\u044f \u043f\u043e\u043c\u043d\u044e, \u0435\u0441\u043b\u0438 \u043c\u043d\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u043e\u0441\u043e\u0431\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b, GreenSock \u0431\u044b\u043b \u043c\u043e\u0438\u043c \u043b\u0443\u0447\u0448\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c. \u0415\u0433\u043e <a href=\"https:\/\/greensock.com\/docs\/v3\/Eases\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 <\/a>&#8212; \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u043e\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/377\/308\/31f\/37730831fbbaa9e66fe0226259a47dd5.png\" width=\"2000\" height=\"1634\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/377\/308\/31f\/37730831fbbaa9e66fe0226259a47dd5.png\"\/><\/figure>\n<p>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u044f \u0443\u0441\u043b\u044b\u0448\u0430\u043b \u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>linear()<\/code>, \u043c\u043e\u0438 \u043c\u044b\u0441\u043b\u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432\u0435\u0440\u043d\u0443\u043b\u0438\u0441\u044c \u043a \u0432\u043e\u043f\u0440\u043e\u0441\u0443: &#171;\u041a\u0430\u043a \u044f \u043c\u043e\u0433\u0443 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 GreenSock \u0432 CSS?&#187;. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u043a\u0430\u043a \u0437\u0434\u043e\u0440\u043e\u0432\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u043c\u0443 \u043d\u0430\u0431\u043e\u0440\u0443 eases, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 CSS, \u043d\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u043a JavaScript.<\/p>\n<p>\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 GreenSock \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 JavaScript \u0438\u043b\u0438 \u043f\u0443\u0442\u044c SVG. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0432\u043e\u0439 \u043c\u043e\u0435\u0439 \u043c\u044b\u0441\u043b\u044c\u044e \u0431\u044b\u043b\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools, \u0432\u0437\u044f\u0442\u044c SVG-\u043f\u0443\u0442\u0438 \u0438\u0437 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440\u0430 \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0438\u0435\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u0443\u0442\u0438 \u0434\u043b\u044f <code>viewBox 0 0 1 1<\/code>. \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 GreenSock \u0438\u043c\u0435\u0435\u0442 <code>viewBox<\/code>, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043d\u0430 <code>0 0 500 500<\/code>. \u042f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438 \u0440\u0435\u0432\u0435\u0440\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0443\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0448\u0435\u043b \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438. \u0417\u0430\u0442\u0435\u043c \u044f \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u043a \u0414\u0436\u0435\u0439\u043a\u0443 \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0435. \u041a\u043e\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043d\u0430 <a href=\"https:\/\/github.com\/jakearchibald\/linear-easing-generator\" rel=\"noopener noreferrer nofollow\">GitHub<\/a>.<\/p>\n<p>\u0412 \u043c\u043e\u0435\u0439 \u0433\u043e\u043b\u043e\u0432\u0435 \u044f \u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e SVG \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b. \u041d\u043e \u043f\u043e\u0442\u043e\u043c \u044f \u0441\u043e\u0437\u0434\u0430\u043b <a href=\"https:\/\/linear-easing-generator.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u0432\u0430\u0440\u0438\u0430\u043d\u0442<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u043d\u043e\u0432\u0430 \u0441\u0432\u044f\u0437\u0430\u043b\u0441\u044f \u0441 \u0414\u0436\u0435\u0439\u043a\u043e\u043c, \u0438 \u043c\u044b \u043e\u0431\u0430 \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0448\u0438\u0431\u043a\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b.<\/p>\n<p>\u0422\u043e\u0433\u0434\u0430 \u0414\u0436\u0435\u0439\u043a \u0441\u043f\u0440\u043e\u0441\u0438\u043b: &#171;\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SVG?&#187;. \u0415\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441 \u0431\u044b\u043b \u0442\u043e\u0447\u043d\u044b\u043c! JavaScript-\u0432\u0445\u043e\u0434 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 easing \u0444\u0443\u043d\u043a\u0446\u0438\u044e. Easing \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430. \u0418 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 GreenSock \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0438\u0445 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0443. \u0414\u0436\u0435\u0439\u043a\u0443 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0443\u0434\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438\u0437 <a href=\"https:\/\/github.com\/greensock\/GSAP\/blob\/6032c54a21981b389a5f5603a45083f38ed5acf9\/src\/gsap-core.js#L1059\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f GreenSock \u043d\u0430 GitHub <\/a>\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0443 <a href=\"https:\/\/linear-easing-generator.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043d\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u043b\u0430 \u043d\u0443\u0436\u043d\u0430.<\/p>\n<h2>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f GSAP Eases \u0434\u043b\u044f CSS<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u0432\u0430\u043c \u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u0447\u0430\u0441\u0442\u0438 \u0433\u043e\u043b\u043e\u0432\u043e\u043b\u043e\u043c\u043a\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0447\u0435\u0433\u043e-\u0442\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c GSAP easing \u0432 \u043a\u043e\u0434 CSS.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043c \u0447\u0430\u0441\u0442\u0438 \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0414\u0436\u0435\u0439\u043a\u0430 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 <code>linear()<\/code> \u0432 \u0441\u043a\u0440\u0438\u043f\u0442. \u0418\u0434\u0435\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u043a\u043b\u044e\u0447\u0435\u0439 \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043b\u043e\u043a CSS \u0441 <code>linear()<\/code> easing. \u0412 GreenSock \u0435\u0441\u0442\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434-\u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <code>parseEase<\/code>. \u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 easing \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 &#8212; \u044d\u0442\u043e easing \u0444\u0443\u043d\u043a\u0446\u0438\u0438 GreenSock.<\/p>\n<pre><code class=\"javascript\">const ease = gsap.parseEase('power1.in') ease(0.5) \/\/ === 0.25 <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u044d\u0442\u043e\u043c \u0446\u0438\u043a\u043b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043c\u0435\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 easing \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0438\u0445 \u0432 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u044b\u0439 \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434. \u041c\u044b \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<pre><code class=\"javascript\">const easings = '' const simplified = 0.0025 const rounded = 4 const EASES = {   'power-1--out': gsap.parseEase('power1.out')   \/\/ Other eases } \/\/ Loop over the easing keys and generate results. for (const key of Object.keys(EASES)) {   \/\/ Pass the easing function through the linear-generator code.   const result = processEase(key, EASES[key])   const optimised = useOptimizedPoints(result.points, simplified, rounded)   const linear = useLinearSyntax(optimised, rounded)   const output = useFriendlyLinearCode(linear, result.name, 0)   easings += output } \/\/ Generate an output CSS string. let outputStart = ':root {' let outputEnd = '}'  let styles = `   ${outputStart}   ${easings}   ${outputEnd} ` \/\/ Write it to the body. document.body.innerHTML = styles <\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0438\u0437\u0432\u043b\u0435\u043a\u043b\u0438 \u0438\u0437 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0433\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430, \u0434\u0435\u043b\u0430\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0435\u0449\u0438:<\/p>\n<ul>\n<li>\n<p><code>processEase<\/code><br \/> \u042d\u0442\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f <code>processScriptData<\/code>. \u041e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 easing \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u043e\u0447\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0433\u0440\u0430\u0444\u0438\u043a\u0430.<\/p>\n<\/li>\n<li>\n<p><code>useOptimizedPoints<\/code><br \/> \u042d\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0445 \u0438 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u044f \u0443\u0437\u043d\u0430\u043b \u043e\u0431 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0435 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm\" rel=\"noopener noreferrer nofollow\">\u0414\u0443\u0433\u043b\u0430\u0441\u0430 \u041f\u0438\u043a\u0435\u0440\u0430 <\/a>\u043e\u0442 \u0414\u0436\u0435\u0439\u043a\u0430.<\/p>\n<\/li>\n<li>\n<p><code>useLinearSyntax<\/code><br \/> \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0435\u0440\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>linear()<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>useFriendlyLinearCode<\/code><br \/> \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 CSS-\u0441\u0442\u0440\u043e\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 ease.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044f \u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u0438\u0445 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0447\u0430\u0441\u0442\u043e. \u041d\u043e <a href=\"https:\/\/codepen.io\/jh3y\/pen\/yLGOaLG\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u043a\u043e\u043f\u0430\u0442\u044c\u0441\u044f <\/a>\u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u0447\u043a\u0443 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0430 \u0438\u043b\u0438 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 <code>console.info<\/code> \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>linear()<\/code> easing. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0443\u043f\u0440\u0443\u0433\u043e\u0441\u0442\u0438 \u0438 \u043e\u0442\u0441\u043a\u043e\u043a\u0430.<\/p>\n<pre><code class=\"css\">:root {   --elastic-in: linear( 0, 0.0019 13.34%, -0.0056 27.76%, -0.0012 31.86%, 0.0147 39.29%, 0.0161 42.46%, 0.0039 46.74%, -0.0416 54.3%, -0.046 57.29%, -0.0357, -0.0122 61.67%, 0.1176 69.29%, 0.1302 70.79%, 0.1306 72.16%, 0.1088 74.09%, 0.059 75.99%, -0.0317 78.19%, -0.3151 83.8%, -0.3643 85.52%, -0.3726, -0.3705 87.06%, -0.3463, -0.2959 89.3%, -0.1144 91.51%, 0.7822 97.9%, 1 );   --elastic-out: linear( 0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1 );   --elastic-in-out: linear( 0, -0.0028 13.88%, 0.0081 21.23%, 0.002 23.37%, -0.0208 27.14%, -0.023 28.64%, -0.0178, -0.0061 30.83%, 0.0588 34.64%, 0.0651 35.39%, 0.0653 36.07%, 0.0514, 0.0184 38.3%, -0.1687 42.21%, -0.1857 43.04%, -0.181 43.8%, -0.1297 44.93%, -0.0201 46.08%, 1.0518 54.2%, 1.1471, 1.1853 56.48%, 1.1821 57.25%, 1.1573 58.11%, 0.9709 62%, 0.9458, 0.9347 63.92%, 0.9349 64.61%, 0.9412 65.36%, 1.0061 69.17%, 1.0178, 1.023 71.36%, 1.0208 72.86%, 0.998 76.63%, 0.9919 78.77%, 1.0028 86.12%, 1 );     --bounce-in: linear( 0, 0.0117, 0.0156, 0.0117, 0, 0.0273, 0.0468, 0.0586, 0.0625, 0.0586, 0.0468, 0.0273, 0 27.27%, 0.1093, 0.1875 36.36%, 0.2148, 0.2343, 0.2461, 0.25, 0.2461, 0.2344, 0.2148 52.28%, 0.1875 54.55%, 0.1095, 0, 0.2341, 0.4375, 0.6092, 0.75, 0.8593, 0.9375 90.91%, 0.9648, 0.9843, 0.9961, 1 );   --bounce-out: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );   --bounce-in-out: linear( 0, 0.0078, 0, 0.0235, 0.0313, 0.0235, 0.0001 13.63%, 0.0549 15.92%, 0.0938, 0.1172, 0.125, 0.1172, 0.0939 27.26%, 0.0554 29.51%, 0.0003 31.82%, 0.2192, 0.3751 40.91%, 0.4332, 0.4734 45.8%, 0.4947 48.12%, 0.5027 51.35%, 0.5153 53.19%, 0.5437, 0.5868 57.58%, 0.6579, 0.7504 62.87%, 0.9999 68.19%, 0.9453, 0.9061, 0.8828, 0.875, 0.8828, 0.9063, 0.9451 84.08%, 0.9999 86.37%, 0.9765, 0.9688, 0.9765, 1, 0.9922, 1 ); } <\/code><\/pre>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u044b\u0432\u043e\u0434 \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0438 \u0438\u043b\u0438 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c. \u0421\u0430\u043c\u043e\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c <a href=\"https:\/\/gist.github.com\/jh3y\/1b3afdfa7af3ebc5668bf169cea17d09\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0438 GreenSock easing <\/a>\u0432 CSS!<\/p>\n<h2>\u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 CSS linear() Ease<\/h2>\n<p>\u0412\u043e\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0441\u043e\u0437\u0434\u0430\u043b. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0439 \u0442\u0438\u043f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a \u043d\u0435\u0439 linear() easing\u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0438\u0442\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<p><a href=\"https:\/\/codepen.io\/smashingmag\/pen\/zYywLXB\" rel=\"noopener noreferrer nofollow\">https:\/\/codepen.io\/smashingmag\/pen\/zYywLXB<\/a><\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 linear() \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>@supports<\/code>:<\/p>\n<pre><code class=\"css\">:root {   --ease: ease-in-out; } @supports(animation-timing-function: linear(0, 1)) {   :root {     --ease: var(--bounce-easing);   } } <\/code><\/pre>\n<p>\u0418 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f, \u0432\u043e\u0442 \u0434\u0435\u043c\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434 \u0441\u0442\u0440\u043e\u043a\u0443 GreenSock ease \u0438 \u0432\u044b\u0434\u0430\u0435\u0442 \u0432\u0430\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>linear()<\/code>. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0432\u0440\u043e\u0434\u0435 <code>elastic.out(1, 0.1)<\/code> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f!<\/p>\n<p><a href=\"https:\/\/codepen.io\/smashingmag\/pen\/RwEVBmM\" rel=\"noopener noreferrer nofollow\">https:\/\/codepen.io\/smashingmag\/pen\/RwEVBmM<\/a><\/p>\n<h2>\u0411\u043e\u043d\u0443\u0441: \u041b\u0438\u043d\u0435\u0439\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f Tailwind #<\/h2>\n<p>\u0412\u044b \u0436\u0435 \u043d\u0435 \u0434\u0443\u043c\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u043c\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0431\u0435\u0437 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Tailwind? \u041d\u0438 \u0432 \u043a\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c Tailwind \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e.<\/p>\n<pre><code class=\"javascript\">\/** @type {import('tailwindcss').Config} *\/ const plugin = require('tailwindcss\/plugin') const EASES = {   \"power1-in\": \"linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914, 0.2499, 0.3164, 0.3906 62.5%, 0.5625, 0.7656, 1 )\",   \/* Other eases *\/ } const twease = plugin(   function ({addUtilities, theme, e}) {     const values = theme('transitionTimingFunction')     var utilities = Object.entries(values).map(([key, value]) => {       return {         [`.${e(`animation-timing-${key}`)}`]: {animationTimingFunction: `${value}`},       }     })     addUtilities(utilities)   } ) module.exports = {   theme: {     extend: {       transitionTimingFunction: {         ...EASES,       }     },   },   plugins: [twease], } <\/code><\/pre>\n<p>\u042f <a href=\"https:\/\/play.tailwindcss.com\/T3w72VmyPj?file=config\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0431\u0440\u0430\u043b \u043a\u043e\u0435-\u0447\u0442\u043e \u0432 Tailwind Play<\/a>, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u042d\u0442\u043e \u0434\u0430\u0441\u0442 \u0432\u0430\u043c \u0442\u0430\u043a\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u043a\u0430\u043a <code>animation-timing-bounce-out<\/code> \u0438 <code>ease-bounce-out<\/code>.<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>CSS \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u043b\u0438\u0448\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u043e \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c JavaScript. \u0421\u043a\u043e\u0440\u043e \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u0443\u043f\u0435\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0442\u0430\u0439\u043c\u0438\u043d\u0433\u0430 <code>linear()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 CSS Easing Level 2.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/810929\/\"> https:\/\/habr.com\/ru\/articles\/810929\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u2014 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u00ab<a href=\"https:\/\/www.smashingmagazine.com\/2023\/09\/path-css-easing-linear-function\/\" rel=\"noopener noreferrer nofollow\">The Path To Awesome CSS Easing With The linear() Function<\/a>\u00bb.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044f \u0432\u0435\u0434\u0443 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c \u043a\u0430\u043d\u0430\u043b \u00ab<a href=\"https:\/\/t.me\/frontend_pasta\" rel=\"noopener noreferrer nofollow\">Frontend \u043f\u043e\u2011\u0444\u043b\u043e\u0442\u0441\u043a\u0438<\/a>\u00bb, \u0433\u0434\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043f\u0440\u043e\u00a0\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0438\u0437\u00a0\u043c\u0438\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<h2>\u0412\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0444\u0440\u0430\u0437\u0438\u0440\u0443\u044f \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u044b\u043b\u0430 \u0441\u043e \u043c\u043d\u043e\u0439: &#171;\u041b\u0443\u0447\u0448\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f &#8212; \u044d\u0442\u043e \u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u0435\u043d\u0438&#187;. \u041e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u043c\u043e\u0443\u0448\u043d \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432 \u0432\u0435\u0431\u0435 &#8212; \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0443\u0448\u043d &#171;\u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0441\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e&#187;. \u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f CSS \u0431\u044b\u043b \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u043d\u0435\u043d\u0430\u0432\u044f\u0437\u0447\u0438\u0432\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>\u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u0432 CSS. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u044f \u0445\u043e\u0447\u0443 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0443\u043f\u0435\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 <code>linear()<\/code> &#8212; \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 CSS Easing Level 2 \u0432 \u0440\u0435\u0434\u0430\u043a\u0446\u0438\u0438 Editor&#8217;s Draft. \u0412\u043c\u0435\u0441\u0442\u0435 \u043c\u044b \u0438\u0437\u0443\u0447\u0438\u043c \u0435\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u0440\u0438\u0432\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0442 \u043a \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c\u0443 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<p>\u0422\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e <code>linear()<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u0443\u0441\u0435 Editor&#8217;s Draft, \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u0441\u044f \u0432 \u043d\u0435\u0447\u0442\u043e, \u0447\u0442\u043e \u0435\u0449\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u043a \u0442\u043e\u043c\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 Candidate Recommendation. \u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0435\u0431\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 <code>linear()<\/code> \u0438\u043c\u0435\u0435\u0442 <a href=\"https:\/\/caniuse.com\/mdn-css_types_easing-function_linear-function\" rel=\"noopener noreferrer nofollow\">\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443<\/a>. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 Chrome \u0438 Firefox, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u043c\u0435\u0439\u0442\u0435 \u044d\u0442\u043e \u0432 \u0432\u0438\u0434\u0443, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0434\u0435\u043b\u0443, \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043f\u0430\u0440\u043e\u0439 \u0441\u0442\u0430\u0442\u0435\u0439. \u041e\u043d\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u043b\u0438 \u043d\u0430 \u043c\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043c\u043e\u0443\u0448\u0435\u043d \u0434\u0438\u0437\u0430\u0439\u043d\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>\u201c<a href=\"https:\/\/uxdesign.cc\/good-to-great-ui-animation-tips-7850805c12e5\" rel=\"noopener noreferrer nofollow\">Good to great UI animation tips<\/a>,\u201d Pablo Stanley<\/p>\n<\/li>\n<li>\n<p>\u201c<a href=\"https:\/\/medium.com\/@ruthiran_b\/disneys-motion-principles-in-designing-interface-animations-9ac7707a2b43\" rel=\"noopener noreferrer nofollow\">Disney\u2019s Motion Principles in designing interface animations<\/a>,\u201d Ruthiran Babu<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043f\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435, \u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438 \u0434\u0432\u0430 \u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u0435\u0440\u0436\u0443 \u043f\u043e\u0434 \u0440\u0443\u043a\u043e\u0439 \u0432 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0430\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0438 \u043e\u043d\u0438, \u0431\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u043f\u043e\u0432\u043b\u0438\u044f\u043b\u0438 \u043d\u0430 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e.<\/p>\n<h2>\u0422\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Easing \u0432 CSS<\/h2>\n<p>\u041c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c CSS easing \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <code>animation-timing-function<\/code> \u0438\u043b\u0438 <code>transition-timing-function<\/code>, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043b\u0438 \u043c\u044b \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>\u041d\u043e \u0434\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 CSS \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u043b \u043d\u0430\u0441 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 easing \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438:<\/p>\n<ul>\n<li>\n<p><code>linear<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>steps<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>ease<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>ease-in<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>ease-out<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>ease-in-out<\/code>,<\/p>\n<\/li>\n<li>\n<p><code>cubic-bezier()<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u0443 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0442\u0430\u0439\u043c\u0438\u043d\u0433\u043e\u0432 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u043f\u043e \u0442\u0440\u0430\u0441\u0441\u0435.<\/p>\n<p><a href=\"https:\/\/codepen.io\/smashingmag\/pen\/PoXmRJQ\" rel=\"noopener noreferrer nofollow\">https:\/\/codepen.io\/smashingmag\/pen\/PoXmRJQ<\/a><\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f cubic-bezier() \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0421\u0430\u0439\u0442 <a href=\"http:\/\/cubic-bezier.com\" rel=\"noopener noreferrer nofollow\">cubic-bezier.com<\/a> &#8212; \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043a\u0440\u0438\u0432\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439.<\/p>\n<p>\u0422\u0430\u043a\u043e\u0432\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 CSS. \u041a \u043d\u043e\u0432\u044b\u043c \u0431\u043b\u0435\u0441\u0442\u044f\u0449\u0438\u043c \u0448\u0442\u0443\u0447\u043a\u0430\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435. \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430, \u044f \u0434\u0443\u043c\u0430\u044e, \u0441\u0442\u043e\u0438\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u043a\u0440\u0438\u0432\u044b\u0445.<\/p>\n<h2>\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0440\u0438\u0432\u044b\u0445<\/h2>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u0440\u0438\u0432\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0430. \u041d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"http:\/\/easings.net\" rel=\"noopener noreferrer nofollow\">easings.net<\/a> \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 cubic-bezier().<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a\u0440\u0438\u0432\u044b\u0435 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 Chromium DevTools, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u0443\u044e \u043a \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0443 \u0438\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h2>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 &#171;\u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e&#187; \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e linear()<\/h2>\n<p>\u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0435, \u0447\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u043d\u0430\u0441\u0447\u0435\u0442 \u043e\u0442\u0441\u043a\u043e\u043a\u0430? \u0418\u043b\u0438 \u043f\u0440\u0443\u0436\u0438\u043d\u0430? \u042d\u0442\u043e \u0442\u0435 \u0442\u0438\u043f\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0440\u0438\u0432\u043e\u0439 cubic-bezier().<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f linear(), <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/pull\/6533\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f <\/a><a href=\"https:\/\/twitter.com\/jaffathecake\" rel=\"noopener noreferrer nofollow\">\u0414\u0436\u0435\u0439\u043a\u043e\u043c \u0410\u0440\u0447\u0438\u0431\u0430\u043b\u044c\u0434\u043e\u043c <\/a>\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 <a href=\"https:\/\/drafts.csswg.org\/css-easing-2\/#linear-easing-function-examples\" rel=\"noopener noreferrer nofollow\">CSS Easing Level 2<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0434\u0438\u0438 Editor&#8217;s Draft. MDN \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0435\u0435:<\/p>\n<blockquote>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f linear() \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0443\u0441\u043e\u0447\u043d\u043e-\u043b\u0438\u043d\u0435\u0439\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043b\u0438\u043d\u0435\u0439\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u0443\u0435\u0442 \u043c\u0435\u0436\u0434\u0443 \u0441\u0432\u043e\u0438\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u043f\u043f\u0440\u043e\u043a\u0441\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043e\u0442\u0441\u043a\u043e\u043a\u0430 \u0438 \u0443\u043f\u0440\u0443\u0433\u043e\u0441\u0442\u0438.<\/p>\n<\/blockquote>\n<p>\u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a \u0441 \u043b\u044e\u0431\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0442\u043e\u0447\u0435\u043a \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439. \u042d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u043e \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u043d\u044c\u0448\u0435 \u043c\u044b \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u0441\u043a\u043e\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"css\">:root {   --bounce-easing: linear(     0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,     1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,     0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,     0.973, 1, 0.988, 0.984, 0.988, 1   ); } <\/code><\/pre>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438: <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/KKbmeeQ\" rel=\"noopener noreferrer nofollow\">https:\/\/codepen.io\/smashingmag\/pen\/KKbmeeQ<\/a><\/p>\n<p>\u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c, \u0447\u0442\u043e <a href=\"https:\/\/caniuse.com\/mdn-css_types_easing-function_linear-function\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 <\/a>\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430 Chrome \u0438 Firefox, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0434\u0435\u043c\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u044d\u0442\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b <a href=\"https:\/\/webkit.org\/standards-positions\/#position-130\" rel=\"noopener noreferrer nofollow\">\u0436\u0434\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e Safari<\/a>, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u0447\u0442\u0438 \u0443 \u0446\u0435\u043b\u0438!<\/p>\n<h2>&#171;\u042f \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442&#187;<\/h2>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0447\u0438\u0441\u0435\u043b, \u0432\u0437\u044f\u0442\u044b\u0445 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u0432\u043e\u0437\u0434\u0443\u0445\u0430, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438? \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0442\u043e \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u0435\u043b\u043e \u0441 \u0447\u0435\u043c-\u0442\u043e \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u044b\u043c, \u043a\u0430\u043a \u0438 <code>cubic-bezier()<\/code>. \u0425\u043e\u0440\u043e\u0448\u043e \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0432\u0430\u043c \u0432\u0440\u044f\u0434 \u043b\u0438 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u0439 \u0441\u043d\u043e\u0432\u0430&#8230; \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f. \u042d\u0442\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0435\u0449\u044c \u0442\u0438\u043f\u0430 &#171;\u0437\u0430\u0434\u0430\u043b \u0438 \u0437\u0430\u0431\u044b\u043b&#187;.<\/p>\n<p>\u041d\u043e \u043a\u0430\u043a \u043c\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0447\u0438\u0441\u043b\u0430? \u0414\u0436\u0435\u0439\u043a, \u0443\u043c\u043d\u044b\u0439 \u0447\u0435\u043b\u043e\u0432\u0435\u043a, \u0441\u043e\u0437\u0434\u0430\u0432\u0448\u0438\u0439 <code>linear()<\/code>, \u0441\u043e\u0431\u0440\u0430\u043b <a href=\"https:\/\/linear-easing-generator.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u043e\u043d\u043b\u0430\u0439\u043d-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0441\u044e \u0442\u044f\u0436\u0435\u043b\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0437\u0430 \u043d\u0430\u0441. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043e\u0442\u0441\u043a\u043e\u043a\u0430 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0414\u0436\u0435\u0439\u043a\u0430. \u0412\u043e\u0442 <a href=\"https:\/\/linear-easing-generator.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/a>.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h2>\u041a \u0447\u0435\u043c\u0443 \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442?<\/h2>\n<p>\u0421\u043a\u043e\u043b\u044c\u043a\u043e \u044f \u0441\u0435\u0431\u044f \u043f\u043e\u043c\u043d\u044e, \u0435\u0441\u043b\u0438 \u043c\u043d\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u043e\u0441\u043e\u0431\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b, GreenSock \u0431\u044b\u043b \u043c\u043e\u0438\u043c \u043b\u0443\u0447\u0448\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c. \u0415\u0433\u043e <a href=\"https:\/\/greensock.com\/docs\/v3\/Eases\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 <\/a>&#8212; \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u043e\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u044f \u0443\u0441\u043b\u044b\u0448\u0430\u043b \u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>linear()<\/code>, \u043c\u043e\u0438 \u043c\u044b\u0441\u043b\u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432\u0435\u0440\u043d\u0443\u043b\u0438\u0441\u044c \u043a \u0432\u043e\u043f\u0440\u043e\u0441\u0443: &#171;\u041a\u0430\u043a \u044f \u043c\u043e\u0433\u0443 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 GreenSock \u0432 CSS?&#187;. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u043a\u0430\u043a \u0437\u0434\u043e\u0440\u043e\u0432\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u043c\u0443 \u043d\u0430\u0431\u043e\u0440\u0443 eases, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 CSS, \u043d\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u043a JavaScript.<\/p>\n<p>\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 GreenSock \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 JavaScript \u0438\u043b\u0438 \u043f\u0443\u0442\u044c SVG. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0432\u043e\u0439 \u043c\u043e\u0435\u0439 \u043c\u044b\u0441\u043b\u044c\u044e \u0431\u044b\u043b\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c DevTools, \u0432\u0437\u044f\u0442\u044c SVG-\u043f\u0443\u0442\u0438 \u0438\u0437 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440\u0430 \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0438\u0435\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u0443\u0442\u0438 \u0434\u043b\u044f <code>viewBox 0 0 1 1<\/code>. \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 GreenSock \u0438\u043c\u0435\u0435\u0442 <code>viewBox<\/code>, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043d\u0430 <code>0 0 500 500<\/code>. \u042f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438 \u0440\u0435\u0432\u0435\u0440\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0443\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0448\u0435\u043b \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438. \u0417\u0430\u0442\u0435\u043c \u044f \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u043a \u0414\u0436\u0435\u0439\u043a\u0443 \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0435. \u041a\u043e\u0434 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043d\u0430 <a href=\"https:\/\/github.com\/jakearchibald\/linear-easing-generator\" rel=\"noopener noreferrer nofollow\">GitHub<\/a>.<\/p>\n<p>\u0412 \u043c\u043e\u0435\u0439 \u0433\u043e\u043b\u043e\u0432\u0435 \u044f \u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e SVG \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b. \u041d\u043e \u043f\u043e\u0442\u043e\u043c \u044f \u0441\u043e\u0437\u0434\u0430\u043b <a href=\"https:\/\/linear-easing-generator.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u0432\u0430\u0440\u0438\u0430\u043d\u0442<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u043d\u043e\u0432\u0430 \u0441\u0432\u044f\u0437\u0430\u043b\u0441\u044f \u0441 \u0414\u0436\u0435\u0439\u043a\u043e\u043c, \u0438 \u043c\u044b \u043e\u0431\u0430 \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0448\u0438\u0431\u043a\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b.<\/p>\n<p>\u0422\u043e\u0433\u0434\u0430 \u0414\u0436\u0435\u0439\u043a \u0441\u043f\u0440\u043e\u0441\u0438\u043b: &#171;\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SVG?&#187;. \u0415\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441 \u0431\u044b\u043b \u0442\u043e\u0447\u043d\u044b\u043c! JavaScript-\u0432\u0445\u043e\u0434 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 easing \u0444\u0443\u043d\u043a\u0446\u0438\u044e. Easing \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430. \u0418 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 GreenSock \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0438\u0445 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0443. \u0414\u0436\u0435\u0439\u043a\u0443 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0443\u0434\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438\u0437 <a href=\"https:\/\/github.com\/greensock\/GSAP\/blob\/6032c54a21981b389a5f5603a45083f38ed5acf9\/src\/gsap-core.js#L1059\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f GreenSock \u043d\u0430 GitHub <\/a>\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0443 <a href=\"https:\/\/linear-easing-generator.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043d\u0435 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u043b\u0430 \u043d\u0443\u0436\u043d\u0430.<\/p>\n<h2>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f GSAP Eases \u0434\u043b\u044f CSS<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b \u0432\u0430\u043c \u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u0447\u0430\u0441\u0442\u0438 \u0433\u043e\u043b\u043e\u0432\u043e\u043b\u043e\u043c\u043a\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0447\u0435\u0433\u043e-\u0442\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c GSAP easing \u0432 \u043a\u043e\u0434 CSS.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043c \u0447\u0430\u0441\u0442\u0438 \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0414\u0436\u0435\u0439\u043a\u0430 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 <code>linear()<\/code> \u0432 \u0441\u043a\u0440\u0438\u043f\u0442. \u0418\u0434\u0435\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u043a\u043b\u044e\u0447\u0435\u0439 \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043b\u043e\u043a CSS \u0441 <code>linear()<\/code> easing. \u0412 GreenSock \u0435\u0441\u0442\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434-\u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <code>parseEase<\/code>. \u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 easing \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 &#8212; \u044d\u0442\u043e easing \u0444\u0443\u043d\u043a\u0446\u0438\u0438 GreenSock.<\/p>\n<pre><code class=\"javascript\">const ease = gsap.parseEase('power1.in') ease(0.5) \/\/ === 0.25 <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u044d\u0442\u043e\u043c \u0446\u0438\u043a\u043b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043c\u0435\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 easing \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0438\u0445 \u0432 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u044b\u0439 \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434. \u041c\u044b \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<pre><code class=\"javascript\">const easings = '' const simplified = 0.0025 const rounded = 4 const EASES = {   'power-1--out': gsap.parseEase('power1.out')   \/\/ Other eases } \/\/ Loop over the easing keys and generate results. for (const key of Object.keys(EASES)) {   \/\/ Pass the easing function through the linear-generator code.   const result = processEase(key, EASES[key])   const optimised = useOptimizedPoints(result.points, simplified, rounded)   const linear = useLinearSyntax(optimised, rounded)   const output = useFriendlyLinearCode(linear, result.name, 0)   easings += output } \/\/ Generate an output CSS string. let outputStart = ':root {' let outputEnd = '}'  let styles = `   ${outputStart}   ${easings}   ${outputEnd} ` \/\/ Write it to the body. document.body.innerHTML = styles <\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0438\u0437\u0432\u043b\u0435\u043a\u043b\u0438 \u0438\u0437 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0433\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430, \u0434\u0435\u043b\u0430\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0435\u0449\u0438:<\/p>\n<ul>\n<li>\n<p><code>processEase<\/code><br \/> \u042d\u0442\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f <code>processScriptData<\/code>. \u041e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 easing \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u043e\u0447\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0433\u0440\u0430\u0444\u0438\u043a\u0430.<\/p>\n<\/li>\n<li>\n<p><code>useOptimizedPoints<\/code><br \/> \u042d\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0445 \u0438 \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u044f \u0443\u0437\u043d\u0430\u043b \u043e\u0431 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0435 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm\" rel=\"noopener noreferrer nofollow\">\u0414\u0443\u0433\u043b\u0430\u0441\u0430 \u041f\u0438\u043a\u0435\u0440\u0430 <\/a>\u043e\u0442 \u0414\u0436\u0435\u0439\u043a\u0430.<\/p>\n<\/li>\n<li>\n<p><code>useLinearSyntax<\/code><br \/> \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0435\u0440\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>linear()<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>useFriendlyLinearCode<\/code><br \/> \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 CSS-\u0441\u0442\u0440\u043e\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 ease.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044f \u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0442\u044c \u0438\u0445 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0447\u0430\u0441\u0442\u043e. \u041d\u043e <a href=\"https:\/\/codepen.io\/jh3y\/pen\/yLGOaLG\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u043a\u043e\u043f\u0430\u0442\u044c\u0441\u044f <\/a>\u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u0447\u043a\u0443 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0430 \u0438\u043b\u0438 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 <code>console.info<\/code> \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>linear()<\/code> easing. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0443\u043f\u0440\u0443\u0433\u043e\u0441\u0442\u0438 \u0438 \u043e\u0442\u0441\u043a\u043e\u043a\u0430.<\/p>\n<pre><code class=\"css\">:root {   --elastic-in: linear( 0, 0.0019 13.34%, -0.0056 27.76%, -0.0012 31.86%, 0.0147 39.29%, 0.0161 42.46%, 0.0039 46.74%, -0.0416 54.3%, -0.046 57.29%, -0.0357, -0.0122 61.67%, 0.1176 69.29%, 0.1302 70.79%, 0.1306 72.16%, 0.1088 74.09%, 0.059 75.99%, -0.0317 78.19%, -0.3151 83.8%, -0.3643 85.52%, -0.3726, -0.3705 87.06%, -0.3463, -0.2959 89.3%, -0.1144 91.51%, 0.7822 97.9%, 1 );   --elastic-out: linear( 0, 0.2178 2.1%, 1.1144<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-374891","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/374891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=374891"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/374891\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=374891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=374891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=374891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}