{"id":277173,"date":"2016-03-29T12:36:03","date_gmt":"2016-03-29T08:36:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=277173"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=277173","title":{"rendered":"\u0421\u043e\u0432\u0435\u0442\u044b, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043f\u043e CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438"},"content":{"rendered":"<p>       <img decoding=\"async\" alt=\"\u0421\u043e\u0432\u0435\u0442\u044b, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043f\u043e CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438\" src=\"https:\/\/habrastorage.org\/files\/b1b\/9ec\/4c4\/b1b9ec4c4ced41d28cec13b156b33a80.jpg\"\/><\/p>\n<h4><b>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/b><\/h4>\n<p>  \u0411\u044b\u043b\u0430 \u0433\u043b\u0443\u0431\u043e\u043a\u0430\u044f \u043d\u043e\u0447\u044c. \u0412 \u0442\u0435\u043c\u043d\u0443\u044e \u043a\u043e\u043c\u043d\u0430\u0442\u0443 \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u0440\u0435\u0432\u044f\u043d\u043d\u044b\u0435 \u043e\u043a\u043d\u0430 \u043f\u0440\u043e\u043d\u0438\u043a\u0430\u043b \u043b\u0443\u043d\u043d\u044b\u0439 \u0441\u0432\u0435\u0442. \u041e\u043d \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0441\u0432\u0435\u0449\u0430\u043b \u043c\u043e\u0439 \u0434\u0435\u0440\u0435\u0432\u044f\u043d\u043d\u044b\u0439 \u0441\u0442\u043e\u043b \u0441 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u043e\u043c, \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u043e\u043c \u0438 \u0441\u0438\u043d\u0435\u0439 \u0440\u0443\u0447\u043a\u043e\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u0440\u043e\u0442\u044f\u043d\u0443\u043b \u0441\u0432\u043e\u044e \u0440\u0443\u043a\u0443 \u043a \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u043e\u0439 \u043b\u0430\u043c\u043f\u0435 \u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u043b \u0435\u0451.<\/p>\n<p>  \u041d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0431\u044b\u043b \u043e\u0442\u043a\u0440\u044b\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043f\u0440\u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443. \u041e\u043d \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u043e\u043f\u043e\u043b\u043d\u044f\u043b\u0441\u044f \u043d\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. <\/p>\n<p>  \u0421\u0432\u0435\u0440\u043d\u0443\u0432 \u0435\u0433\u043e, <s>\u044f \u043f\u043e\u0448\u0435\u043b \u043d\u0430 \u0443\u043b\u0438\u0446\u0443 \u0432 \u043f\u043e\u0438\u0441\u043a\u0430\u0445 \u043a\u0438\u043d\u043e\u0442\u0435\u0430\u0442\u0440\u0430 \u0441 Deadpool&#8217;\u043e\u043c<\/s> \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u0441\u0442\u0430\u043b \u0431\u043b\u0443\u0436\u0434\u0430\u0442\u044c \u043f\u043e \u043e\u043a\u0440\u0435\u0441\u0442\u043d\u043e\u0441\u0442\u044f\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0433\u0443\u043b\u043a\u0438 \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e js-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u2026 \u041a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u043f\u043e \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u0435 \u0443 \u043c\u0435\u043d\u044f \u0443\u0436\u0435 \u043d\u0430\u0431\u0440\u0430\u043b\u043e\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0435 40 \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. <br \/>  <a name=\"habracut\"><\/a><br \/>  \u2026 \u0421 \u0442\u043e\u0433\u043e \u0434\u043d\u044f \u0432 \u043c\u043e\u0435\u0439 \u0433\u043e\u043b\u043e\u0432\u0435 \u0437\u0430\u0441\u0435\u043b\u0430 \u043c\u044b\u0441\u043b\u044c: &quot;<s>\u042f \u0442\u0430\u043a \u0438 \u043d\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b Deadpool<\/s> \u043f\u043e\u0440\u0430 \u0443\u0436\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u043d\u0435\u0439 \u043b\u044e\u0434\u044f\u043c&quot;. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 <a href=\"http:\/\/gefest-ide.com\/index.php?url=habr-anim\">\u043e\u0431\u043b\u0430\u0447\u043d\u043e\u0439 IDE \u00abmr. Gefest\u00bb<\/a>, \u044f \u0432\u044b\u0434\u0435\u043b\u0438\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0447\u0435\u0440\u043e\u0432 (\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e) \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0442\u0435\u043f\u0435\u0440\u044c \u0412\u044b \u0447\u0438\u0442\u0430\u0435\u0442\u0435. <\/p>\n<p>  \u0412 \u043d\u0435\u0439 \u0412\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u043a\u0430\u043a\u0438\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 (css\/js), \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0441 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u0438 \u0443\u0437\u043d\u0430\u0435\u0442\u0435 \u043e \u043d\u043e\u0432\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 web-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/p>\n<h4><b>\u0421SS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/b><\/h4>\n<p>  <b>CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/b> \u2014 \u044d\u0442\u043e \u0438\u0437\u0443\u043c\u0440\u0443\u0434 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0434\u043b\u044f \u043e\u0436\u0438\u0432\u043b\u0435\u043d\u0438\u044f \u0412\u0430\u0448\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432. \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u0438 \u043f\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b (\u0441\u043c\u0435\u043d\u0430 \u0446\u0432\u0435\u0442\u0430, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435) \u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0431\u0435\u0437 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f JavaScript. <\/p>\n<p>  \u041e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 CSS-Transitions \u0438 CSS-Animations.<\/p>\n<p>  <b>Transitions<\/b> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432. <br \/>  <b>Animations<\/b> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u043c\u0438.<\/p>\n<p>  \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 CSS-Transforms \u0438 content pseudo-elements (\u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b).<\/p>\n<p>  <b>Transforms<\/b> \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0432\u0440\u0430\u0449\u0430\u0442\u044c, \u0441\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0438 \u043d\u0430\u043a\u043b\u043e\u043d\u044f\u0442\u044c DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442. <br \/>  <b>Content pseudo-elements after \u0438 before<\/b> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 (\u0447\u0435\u0440\u0435\u0437 css) \u0434\u043e \u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f html.<\/p>\n<p>  \u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 CSS-Transitions, CSS-Animations, CSS-Transforms \u0438 content pseudo-elements, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 <b>\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u0442\u0430\u0442\u044c\u0438, \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0438\u0445<\/b>:  <\/p>\n<ul>\n<li><a href=\"https:\/\/learn.javascript.ru\/css-transitions\">\u041f\u0440\u043e CSS-Transitions \u043e\u0442 Javascript.ru<\/a>;<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/CSS_Transitions\/Using_CSS_transitions\">\u041f\u0440\u043e CSS-Transitions \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Mozilla<\/a>;<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/CSS_Animations\">\u041f\u0440\u043e CSS-Animations \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Mozilla<\/a>;<\/li>\n<li><a href=\"http:\/\/frontender.info\/ochen-prostoe-rukovodstvo-po-css-animatsiyam\/\">\u041f\u0440\u043e css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 Frontender<\/a>;<\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2011\/05\/an-introduction-to-css3-keyframe-animations\/\">\u041f\u0440\u043e CSS-Animations \u043e\u0442 SmashingMagazine \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a>;<\/li>\n<li><a href=\"http:\/\/html5book.ru\/css3-animation\/\">Css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430 html5book<\/a>;<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/\">\u041f\u0440\u043e CSS-Transform \u043e\u0442 CSS-tricks \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a>;<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform\">\u041f\u0440\u043e CSS-Transform \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Mozilla \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a>;<\/li>\n<li><a href=\"https:\/\/habrahabr.ru\/post\/135816\/\">\u041f\u0440\u043e CSS-Transform \u043d\u0430 \u0445\u0430\u0431\u0440\u0435<\/a>;<\/li>\n<li><a href=\"https:\/\/habrahabr.ru\/post\/154319\/\">\u041f\u0440\u043e \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0445\u0430\u0431\u0440\u0435<\/a>;<\/li>\n<\/ul>\n<p>  <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438:<\/b>  <\/p>\n<ul>\n<li><a href=\"http:\/\/caniuse.com\/#search=pseudo-elements\">CSS Generated content for pseudo-elements<\/a>;<\/li>\n<li><a href=\"http:\/\/caniuse.com\/#search=transforms\">CSS3 2D Transforms<\/a>;<\/li>\n<li><a href=\"http:\/\/caniuse.com\/#feat=css-transitions\">CSS-Transitions<\/a>;<\/li>\n<li><a href=\"http:\/\/caniuse.com\/#feat=css-animation\">CSS-Animations<\/a>.<\/li>\n<\/ul>\n<p>  <b>\u041e\u0431\u0435\u0440\u0442\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 CSS-Animations (key-frames):<\/b>  <\/p>\n<ul>\n<li><a href=\"http:\/\/keyframes.github.io\/jQuery.Keyframes\/\">jQuery.Keyframes<\/a>;<\/li>\n<li>\u0412\u0430\u0448\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/li>\n<\/ul>\n<h4><b>\u0421\u043e\u0432\u0435\u0442\u044b \u043f\u043e \u0421SS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/b><\/h4>\n<p>  <\/p>\n<h5><b>! \u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c<\/b><\/h5>\n<p>  \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043e\u0439 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c. \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0438\u043b\u0438 \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u043e, \u043d\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u0431\u0434\u0443\u043c\u0430\u0442\u044c \u0437\u0430\u0440\u0430\u043d\u0435\u0435. <\/p>\n<p>  \u0411\u044b\u0432\u0430\u0435\u0442 \u043e\u0442\u043a\u0440\u043e\u0435\u0448\u044c \u0431\u043b\u043e\u043a \u0441 \u043f\u043e\u0438\u0441\u043a\u043e\u043c, \u0430 \u0442\u0430\u043c \u043f\u043e\u043b\u0435, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043a\u043d\u043e\u043f\u043a\u0430 \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u0440\u0430\u0437\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e. \u0411\u0443\u0434\u0442\u043e \u043c\u0443\u043b\u044c\u0442\u0438\u043a \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435. \u042d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0434\u0438\u0441\u043a\u043e\u043c\u0444\u043e\u0440\u0442 \u0438 \u043d\u0435\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432 GPU.<\/p>\n<h5><b>! \u041f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/b><\/h5>\n<p>  \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 4 \u044d\u0442\u0430\u043f\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f DOM: <b>recalculate style<\/b>, <b>layout<\/b>, <b>paint<\/b>, <b>composite<\/b>.<\/p>\n<p>  <b>\u0412\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439<\/b> (recalculate style) \u2014 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435 CSS-\u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0433\u043e style \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  <b>\u041f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 \u043c\u0430\u043a\u0435\u0442\u0430<\/b> (layout) \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <b>\u041f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0430<\/b> (paint) \u2014 \u0432\u044b\u0432\u043e\u0434 \u0432\u0441\u0435\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0446\u0432\u0435\u0442, \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442\u0430, \u0448\u0440\u0438\u0444\u0442, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0442\u0435\u043d\u044c \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435).<\/p>\n<p>  <b>\u041a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0430<\/b> (composite) \u2014 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0435\u0434\u0438\u043d\u0443\u044e \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e.<\/p>\n<p>  \u0412\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439, \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 \u043c\u0430\u043a\u0435\u0442\u0430(layout) \u0438 \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0430(paint) \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u044e\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0447\u0435\u043c composite (\u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0430). <\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 &quot;<b>transform: translate<\/b>&quot; \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439, \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u0441\u043b\u043e\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041e\u043d \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 (\u0432 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u043e\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u0441\u043b\u043e\u0435 \u0431\u0435\u0437 \u0441\u0434\u0432\u0438\u0433\u0430 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432) \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 <b>GPU<\/b>, \u0430 \u043d\u0435 \u0432 CPU. \u0417\u0430 \u0441\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f GPU, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043f\u043b\u0430\u0432\u043d\u043e \u0431\u0435\u0437 \u0437\u0430\u0434\u0435\u0440\u0436\u0435\u043a. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u043e <a href=\"http:\/\/www.youtube.com\/watch?v=-62uPWUxgcg\">\u043d\u0430 \u0432\u0438\u0434\u0435\u043e<\/a>.<\/p>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <b>GPU \u0432\u043c\u0435\u0441\u0442\u043e CPU<\/b> \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445 \u0438 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0430\u0445, \u0433\u0434\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b.<\/p>\n<p>  \u041e\u0434\u043d\u0438 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u0447\u0435\u0440\u0435\u0437 4 \u044d\u0442\u0430\u043f\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0434\u0440\u0443\u0433\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u0434\u0432\u0430. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0445 \u0437\u043d\u0430\u0442\u044c \u0438 \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u00abHeight\u00bb \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e DOM-\u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0439\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 recalculate style, layout, paint \u0438 composite, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u043d\u0435\u0433\u043e \u043c\u043e\u0433\u0443\u0442 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445 \u0442\u043e\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432.<\/p>\n<p>  <b>\u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/b> \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 <b>\u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u0449\u0438\u043a<\/b> \u0438\u043b\u0438 <b>Paint + Composite<\/b>:  <\/p>\n<ul>\n<li>transform: rotate;<\/li>\n<li>transform: scale;<\/li>\n<li>transform: translate;<\/li>\n<li>opacity;<\/li>\n<li>color.<\/li>\n<\/ul>\n<p>  <b>\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043f\u043e \u0442\u0435\u043c\u0435:<\/b>  <\/p>\n<ul>\n<li><a href=\"http:\/\/csstriggers.com\/\">Css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441 \u044d\u0442\u0430\u043f\u0430\u043c\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/a>;<\/li>\n<li><a href=\"http:\/\/goo.gl\/lPVJY6\">\u0427\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/a>;<\/li>\n<li><a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/speed\/layers\/\">\u0423\u0441\u043a\u043e\u0440\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432 Chrome<\/a>;<\/li>\n<li><a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/speed\/high-performance-animations\/\">\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0435<\/a>;<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/rendering\/\">\u041f\u0440\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043e\u0442 Google<\/a>;<\/li>\n<li><a href=\"http:\/\/mrsamo.github.io\/web-animations\/examples\/perf\/index.html\">\u0422\u0435\u0441\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 left \u0438 translateX<\/a>;<\/li>\n<li><a href=\"https:\/\/habrahabr.ru\/company\/yandex\/blog\/239169\/\">\u041f\u0440\u043e \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u043e\u0435 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u043e\u0442 \u042f\u043d\u0434\u0435\u043a\u0441\u0430 \u043d\u0430 \u0445\u0430\u0431\u0440\u0435<\/a>;<\/li>\n<li><a href=\"http:\/\/www.chromium.org\/developers\/design-documents\/gpu-accelerated-compositing-in-chrome\">\u041f\u0440\u043e GPU Accelerated Compositing in Chrome<\/a> .<\/li>\n<\/ul>\n<h5><b>! \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0439\u0442\u0435 will-change \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0443\u043c\u043e\u043c<\/b><\/h5>\n<p>  \u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u2014 <b>will-change<\/b>. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443, \u0447\u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0438 \u0435\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. <\/p>\n<p>  Will-change \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:  <\/p>\n<ul>\n<li><b>auto<\/b> \u2014 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e\/\u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e;<\/li>\n<li><b>scroll-position<\/b> \u2014 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e\/\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043e\u0441\u044b \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/li>\n<li><b>contents<\/b> \u2014 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e\/\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/li>\n<li><b>custom-ident<\/b> \u2014 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e.<\/li>\n<\/ul>\n<p>  \u0415\u0441\u043b\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c:  <\/p>\n<pre><code class=\"css\">.text { \twill-change: opacity; \t-webkit-transition: opactiy 0.5s ease;  \t-moz-transition: opactiy 0.5s ease; \t-o-transition: opactiy 0.5s ease; \ttransition: opactiy 0.5s ease; } .text:hover { \topacity:0.6; } <\/code><\/pre>\n<p>  \u0422\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f &quot;.text&quot;.<\/p>\n<p>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0443\u0442\u0435\u043c \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u0438, \u0447\u0442\u043e will-change \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0435 \u0441\u0440\u0430\u0437\u0443, \u0430 \u0437\u0430 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0430 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u2014 \u0443\u0434\u0430\u043b\u044f\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438. \u0415\u0441\u043b\u0438 \u0442\u0430\u043a \u043d\u0435 \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0442\u044c, \u0442\u043e \u0441\u0430\u0439\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043c\u044f\u0442\u044c, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 99% \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u044d\u0442\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. \u0422\u0430\u043a\u043e\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 will-change \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 javascript. <\/p>\n<p>  \u0421\u0442\u043e\u0438\u0442\u044c \u0443\u0447\u0435\u0441\u0442\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0447\u0430\u0441\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u0442\u043e \u0434\u043b\u044f \u043d\u0438\u0445 \u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c will-change \u0441\u0440\u0430\u0437\u0443 \u0432 \u0441\u0442\u0438\u043b\u044f\u0445.<\/p>\n<p>  <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432:<\/b>  <\/p>\n<ul>\n<li>Chrome 36+;<\/li>\n<li>Firefox 36+;<\/li>\n<li>Opera 26+;<\/li>\n<li>Android 36+;<\/li>\n<li>Safari, IE, iOS \u2014 \u043d\u0435\u0442 (\u043d\u0430 22 \u043c\u0430\u0440\u0442\u0430).<\/li>\n<\/ul>\n<p>  <b>\u0421\u0442\u0430\u0442\u044c\u0438 \u0434\u043b\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f:<\/b>  <\/p>\n<ul>\n<li><a href=\"https:\/\/dev.opera.com\/articles\/ru\/css-will-change-property\/\">\u0412\u0441\u0435 \u043e will-change \u043e\u0442 OperaDev<\/a>;<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/will-change\">\u041f\u0440\u043e will-change \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Mozilla<\/a>;<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/will-change\/\">\u041f\u0440\u043e will-change \u0432 CSS-tricks<\/a>;<\/li>\n<li><a href=\"https:\/\/drafts.csswg.org\/css-will-change\/\">\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430 will-change<\/a>.<\/li>\n<\/ul>\n<h5><b>! \u0413\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/b><\/h5>\n<p>  \u041f\u0440\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u044b\u0435 \u043e\u043a\u043d\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u0443\u0434\u0442\u043e \u043d\u0430\u043f\u043b\u044b\u0432\u0430\u0442\u044c, \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0438 \u043f\u043b\u0430\u0432\u043d\u043e, \u0430 \u043f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0443\u0445\u043e\u0434\u0438\u0442\u044c (\u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0445\u043e\u0442\u044f\u0442 \u043f\u043e\u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e). \u0412 \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0434\u043e\u043b\u044c\u0448\u0435 500 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<h5><b>! \u0421\u043e\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043f\u0430\u043a\u0435\u0442\u044b<\/b><\/h5>\n<p>  \u0422\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f:  <\/p>\n<pre><code class=\"javascript\">var b1=document.getElementById('box1'); var b2=document.getElementById('box2'); var b3=document.getElementById('box3');  var b2W=b2.offsetWidth; b2.style.left=b2W+'px';  var b3W=b3.offsetWidth; b3.style.left=b3W+'px';  b1.style.left='0'; <\/code><\/pre>\n<p>  \u0410 \u0442\u0430\u043a \u043d\u0443\u0436\u043d\u043e:  <\/p>\n<pre><code class=\"javascript\">var b1=document.getElementById('box1'); var b2=document.getElementById('box2'); var b3=document.getElementById('box3');  var b2W=b2.offsetWidth; var b3W=b3.offsetWidth;  b2.style.left=b2W+'px'; b3.style.left=b3W+'px'; b1.style.left='0'; <\/code><\/pre>\n<p>  \u041f\u043e\u0447\u0435\u043c\u0443?<br \/>  \u0415\u0441\u043b\u0438 \u0412\u044b \u0447\u0438\u0442\u0430\u043b\u0438 \u043f\u0440\u043e\u0448\u043b\u044b\u0435 \u0441\u043e\u0432\u0435\u0442\u044b, \u0442\u043e \u0443\u0437\u043d\u0430\u043b\u0438, \u0447\u0442\u043e \u043f\u0440\u0438 \u0432\u044b\u0432\u043e\u0434\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 4 \u044d\u0442\u0430\u043f\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439, \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043c\u0430\u043a\u0435\u0442\u0430, \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438.<\/p>\n<p>  \u0412 \u043f\u043b\u043e\u0445\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0434\u0432\u0430 \u0440\u0430\u0437\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 \u043c\u0430\u043a\u0435\u0442\u0430 \u0432 \u0441\u0442\u0440\u043e\u0447\u043a\u0430\u0445 &quot;<b>var b3W=b3.offsetWidth;<\/b>&quot; \u0438 &quot;<b>var b3W=b3.offsetWidth;<\/b>&quot;, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0431\u044b\u043b\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e (left). \u0411\u0435\u0437 \u043f\u0435\u0440\u0435\u0441\u0447\u0451\u0442\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0442\u043e\u0447\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u00aboffsetWidth\u00bb, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u0432\u043b\u0438\u044f\u043b\u043e \u043d\u0430 \u043d\u0435\u0433\u043e.<\/p>\n<p>  <b>\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f!<\/b><\/p>\n<p>  \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b:  <\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/rendering\/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts\">\u041f\u0440\u043e \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 \u043c\u0430\u043a\u0435\u0442\u043e\u0432<\/a>;<\/li>\n<li><a href=\"https:\/\/habrahabr.ru\/post\/273471\/#css_animations\">\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u043e\u0432\u0435\u0442\u044b \u043f\u043e CSS<\/a>;<\/li>\n<li><a href=\"http:\/\/webo.in\/articles\/all\/2009\/31-rending-restyle-reflow-relayout\/\">\u0421\u0442\u0430\u0440\u0430\u044f, \u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0430 \u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/a>.<\/li>\n<\/ul>\n<h5><b>! \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0439\u0442\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430<\/b><\/h5>\n<p>  \u0421\u0442\u0440\u0430\u043d\u043d\u043e, \u043d\u043e \u0437\u0430 \u0432\u0441\u0435 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043c\u043d\u0435 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u043b\u0441\u044f \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0410 \u0432\u0435\u0434\u044c \u044d\u0442\u0430 \u0442\u0435\u043c\u0430 \u0434\u043e\u0441\u0442\u043e\u0439\u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438. <\/p>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0435\u043c\u043a\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0438\u0445!<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0441\u043e\u0432\u0435\u0442\u0435 \u044f \u043a\u0440\u0430\u0442\u043a\u043e \u043e\u043f\u0438\u0448\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<h6><b>Google Chrome<\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 Google Chrome\" src=\"https:\/\/habrastorage.org\/files\/fb7\/725\/eb1\/fb7725eb11a34d75baf6158b804c0e60.jpg\"\/><\/p>\n<p>  \u0427\u0435\u0440\u0435\u0437 Chrome \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u0412\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u00abTimeline\u00bb \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442:  <\/p>\n<ul>\n<li>\u0412\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0448\u043a\u0430\u043b\u0430 \u0441 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f;<\/li>\n<li>\u0413\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u043b\u0435\u043f\u043a\u0438 \u0441\u0430\u0439\u0442\u0430 (\u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b) \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0448\u0430\u0433\u0430;<\/li>\n<li>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u0442\u0430\u043f\u043e\u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f;<\/li>\n<li>\u041e\u0431\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0448\u0430\u0433\u0435;<\/li>\n<li>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u0442\u0430\u043f\u0430;<\/li>\n<li>\u041f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438;<\/li>\n<li>\u0418 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u043b\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/li>\n<\/ul>\n<p>  \u0412 \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 Google Chrome \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0430 \u043a\u0430\u043a\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0445\u043e\u0440\u043e\u0448\u043e. \u0412 \u0435\u0433\u043e \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430\u0445 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u0438 \u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0412 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b.<\/p>\n<h6><b>Safari<\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 Safari\" src=\"https:\/\/habrastorage.org\/files\/309\/466\/d13\/309466d13a854b7b8c7e6d906e2f94dc.jpg\"\/><\/p>\n<p>  \u0412 Safari \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u00ab\u0428\u043a\u0430\u043b\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438\u00bb \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u00ab\u041c\u0430\u043a\u0435\u0442 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u00bb. <\/p>\n<p>  \u041d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0431\u043b\u043e\u043a\u0435 \u0441 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0448\u043a\u0430\u043b\u043e\u0439 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u044d\u0442\u0430\u043f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430. \u0412 \u043d\u0438\u0436\u043d\u0435\u043c \u0431\u043b\u043e\u043a\u0435 \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0441\u0442\u044c \u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u0412 \u043f\u043e\u0434\u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u00ab\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0444\u0440\u0435\u0439\u043c\u043e\u0432\u00bb \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u0442\u0430\u043f\u0435.<\/p>\n<p>  \u0412 Safari \u043e\u0442\u043a\u043b\u0430\u0434\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043c\u0430\u043b\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u0430. \u041d\u0435\u0442 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043f\u043e \u0435\u0433\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 Google Chrome.<\/p>\n<h6><b>Mozilla Firefox<\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 Mozilla Firefox\" src=\"https:\/\/habrastorage.org\/files\/2e9\/c39\/975\/2e9c399752334b5f9797995de41535d1.jpg\"\/><\/p>\n<p>  \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e. \u0415\u0441\u0442\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0448\u043a\u0430\u043b\u0430 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0448\u0430\u0433\u0430\u043c\u0438 \u043f\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0431\u043b\u043e\u043a\u043e\u043c \u0438\u0445 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0441\u0442\u0438. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u044d\u0442\u0430\u043f\u0430\u0445 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442.<\/p>\n<p>  Firefox \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0430\u0437\u0431\u043e\u0440\u0430 html \u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0430\u0439\u0442\u0430 (\u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u043c\u0443\u0441\u043e\u0440\u0430, \u0440\u0430\u0437\u0431\u043e\u0440 html\/xml, \u0440\u0435\u0434\u0443\u043a\u0446\u0438\u044f CC Graph \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435).<\/p>\n<h5><b>! \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e requestAnimationFrame<\/b><\/h5>\n<p>  \u0420\u0430\u043d\u044c\u0448\u0435 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 setInterval\/setTimeout. \u0412 \u043d\u0438\u0445 \u0437\u0430\u0434\u0430\u0432\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u0439 (1000ms \/ 60(fps) = 16.7ms \u0432 \u0438\u0434\u0435\u0430\u043b\u0435) \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b. \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432:  <\/p>\n<ul>\n<li>\u0415\u0441\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435, \u0442\u043e \u043e\u043d\u0430 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430;<\/li>\n<li>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u043d\u0435 \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0443\/\u041f\u041a \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0434\u043b\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0447\u0430\u0441\u0442\u043e\u0442\u043e\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 \u044d\u043a\u0440\u0430\u043d\u0430;<\/li>\n<li>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u0434\u0451\u0440\u0433\u0438\u0432\u0430\u0442\u044c\u0441\u044f, \u0442\u0430\u043a \u043a\u0430\u043a js \u2014 \u043e\u0434\u043d\u043e\u043f\u043e\u0442\u043e\u0447\u043d\u044b\u0439 \u0438 \u0432 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f, <\/li>\n<\/ul>\n<p>  \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043d\u0435 \u0441\u0442\u043e\u044f\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435. \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0431\u044b\u043b\u0430 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <b>requestAnimationFrame<\/b>. <b>\u0415\u0451 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430:<\/b>  <\/p>\n<ul>\n<li>\u0412 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u043a\u043b\u0430\u0434\u043a\u0430\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 (\u043f\u0430\u043c\u044f\u0442\u0438, CPU, GPU \u0438 \u0440\u0430\u0441\u0445\u043e\u0434 \u0431\u0430\u0442\u0430\u0440\u0435\u0438);<\/li>\n<li>\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0438 (repaint) \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440 \u043a \u044d\u0442\u043e\u043c\u0443 \u0433\u043e\u0442\u043e\u0432;<\/li>\n<li>\u0423\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 FPS \u043f\u0440\u0438 \u0441\u0438\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430\u0445 \u0434\u043b\u044f \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u0431\u0430\u0442\u0430\u0440\u0435\u0438 \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430;<\/li>\n<li>\u0412\u0441\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 (\u0430 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438) \u2014 \u044d\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0438 \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/li>\n<\/ul>\n<p>  <b>\u041e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f:<\/b>  <\/p>\n<ul>\n<li>\u0412 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u044b\u0439 API (\u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 polyfill);<\/li>\n<li>\u0421\u043b\u043e\u0436\u043d\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c FPS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u00ab\u043a\u043e\u0441\u0442\u044b\u043b\u0435\u0439\u00bb);<\/li>\n<li>\u041d\u0435 \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u043d\u043e\u0432\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435 \u0442\u043e\u0442 \u0436\u0435 setInterval (IE10+);<\/li>\n<li>\u0412\u0441\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0434\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430 16.7 mc (\u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u0442\u044c).<\/li>\n<\/ul>\n<p>  <b>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b:<\/b>  <\/p>\n<ul>\n<li><a href=\"https:\/\/habrahabr.ru\/post\/114358\/\">\u041e requestAnimationFrame \u043d\u0430 \u0445\u0430\u0431\u0440\u0435<\/a>;<\/li>\n<li><a href=\"http:\/\/html5.by\/blog\/what-is-requestanimationframe\/\">\u041f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b requestAnimationFrame<\/a>;<\/li>\n<li><a href=\"http:\/\/forwebdev.ru\/javascript\/using-requestanimationframe\/\">\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c requestAnimationFrame<\/a> ;<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/DOM\/window.requestAnimationFrame\">\u041f\u0440\u043e requestAnimationFrame \u043e\u0442 Mozilla<\/a>;<\/li>\n<li><a href=\"http:\/\/www.paulirish.com\/2011\/requestanimationframe-for-smart-animating\/\">\u041e requestAnimationFrame \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 Google Chrome<\/a>;<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2012\/05\/requestAnimationFrame-API-now-with-sub-millisecond-precision\">\u041f\u0440\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b requestAnimationFrame \u0432 Chrome \u043e\u0442 Google<\/a>;<\/li>\n<li><a href=\"https:\/\/msdn.microsoft.com\/ru-ru\/library\/hh773174(v=vs.85).aspx\">\u041f\u0440\u043e requestAnimationFrame \u0432 MSDN Microsoft<\/a>;<\/li>\n<li><a href=\"https:\/\/gist.github.com\/paulirish\/1579671\">Polyfill requestAnimationFrame<\/a>.<\/li>\n<\/ul>\n<h5><b>! \u0412\u044b\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u0442\u0438\u043f (css \u0438\u043b\u0438 js) \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0437\u0430\u0434\u0430\u0447\u0438<\/b><\/h5>\n<p>  \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0435\u0441\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430. \u0418\u0445 \u0441\u0442\u043e\u0438\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435.<\/p>\n<p>  <b>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 css-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a:<\/b>  <\/p>\n<ul>\n<li>\u0423\u0434\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/li>\n<li>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u0440\u0430\u0437\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0432 GPU;<\/li>\n<li>\u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u0442\u044f\u0436\u0435\u043b\u044f\u0442\u044c \u0441\u0430\u0439\u0442 js-\u043a\u043e\u0434\u043e\u043c.<\/li>\n<\/ul>\n<p>  <b>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 css-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a:<\/b>  <\/p>\n<ul>\n<li>\u0422\u0440\u0443\u0434\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/li>\n<li>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0435\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0435\u043a\u0443\u043d\u0434\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f).<\/li>\n<\/ul>\n<p>  <b>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 js-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a:<\/b>  <\/p>\n<ul>\n<li>\u041c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043b\u044e\u0431\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438;<\/li>\n<li>\u041f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c\/\u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0442\u044c, \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0435\u043a\u0443\u043d\u0434\u0435 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435);<\/li>\n<li>\u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a css, \u043d\u043e \u0438 \u043a SVG \u0438 canvas;<\/li>\n<li>\u0418\u043d\u043e\u0433\u0434\u0430 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 css-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a;<\/li>\n<li>\u0420\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 easing function (\u0441 2-\u043c\u044f \u0438 \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u043a\u0440\u0438\u0432\u044b\u0445).<\/li>\n<\/ul>\n<p>  <b>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 js-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a:<\/b>  <\/p>\n<ul>\n<li>\u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0430\u0439\u0442\u0430;<\/li>\n<li>\u0418\u0437\u0431\u044b\u0442\u043e\u0447\u0435\u043d \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439;<\/li>\n<li>\u0421\u043b\u043e\u0436\u0435\u043d \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f.<\/li>\n<\/ul>\n<p>  \u0421\u0442\u043e\u0438\u0442 \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0438 \u043e \u0442\u0440\u0435\u0442\u044c\u0435\u043c \u0442\u0438\u043f\u0435. \u041c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441\u0430\u043c\u043e\u043c\u0443 \u0438\u043b\u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438\u0437 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e css- \u0438 js-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<h4><b>CSS-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/b><\/h4>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 css-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e <b>\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e:<\/b>  <\/p>\n<ul>\n<li>\u041e\u0442\u0441\u043a\u043e\u043a;<\/li>\n<li>\u0422\u0440\u044f\u0441\u043a\u0430;<\/li>\n<li>\u041a\u0430\u0447\u0435\u043b\u0438;<\/li>\n<li>\u0416\u0435\u043b\u0435;<\/li>\n<li>\u041c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0435 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u0435\/\u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435;<\/li>\n<li>\u041a\u0443\u0432\u044b\u0440\u043e\u043a;<\/li>\n<li>\u041f\u043e\u0432\u043e\u0440\u043e\u0442;<\/li>\n<li>\u0421\u043a\u043e\u043b\u044c\u0436\u0435\u043d\u0438\u0435;<\/li>\n<li>\u0438 \u0434\u0440\u0443\u0433\u0438\u0435.<\/li>\n<\/ul>\n<p>  \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 javascript \u0438\u043b\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Animate.css<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/daneden.github.io\/animate.css\/\">Animate.css<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Animate.css\" src=\"https:\/\/habrastorage.org\/files\/ac4\/fec\/004\/ac4fec00456149e285cbf33477281a79.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 <b>75 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438<\/b>. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441 2011 \u0433\u043e\u0434\u0430. \u0414\u043e 2013-14 \u0433\u043e\u0434\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0430 online-\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u041f\u043e\u0437\u0436\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0435\u0433\u043e \u0443\u0431\u0440\u0430\u043b\u0438 \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 build-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Gulp.js. \u0412\u0441\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442  @keyframes. <\/p>\n<p>  \u0415\u0433\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0434\u0430\u044e\u0449\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445.<\/p>\n<p>  <b>\u0421\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0440\u0430\u0437\u0431\u0438\u043b\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0430 14 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439:<\/b>  <\/p>\n<ul>\n<li>Attention Seekers;<\/li>\n<li>Bouncing Entrances;<\/li>\n<li>Bouncing Exits;<\/li>\n<li>Fading Entrances;<\/li>\n<li>Fading Exits;<\/li>\n<li>Flippers;<\/li>\n<li>Lightspeed;<\/li>\n<li>Rotating Entrances;<\/li>\n<li>Rotating Exits;<\/li>\n<li>Sliding Entrances;<\/li>\n<li>Sliding Exits;<\/li>\n<li>Zoom Entrances;<\/li>\n<li>Zoom Exits;<\/li>\n<li>Specials.<\/li>\n<\/ul>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/daneden.github.io\/animate.css\/\">Animate.css<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Effeckt.css<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/h5bp.github.io\/Effeckt.css\/\">Effeckt.css<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Effeckt.css\" src=\"https:\/\/habrastorage.org\/files\/367\/f11\/7bf\/367f117bf8244309ba9260924cca2a73.jpg\"\/><\/p>\n<p>  Effeckt.css \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0432 2013 \u0433\u043e\u0434\u0443. \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043a, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e. <\/p>\n<p>  <b>\u041e\u043d \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0435 \u043f\u043e \u0442\u0438\u043f\u0443 \u0438 \u0441\u0442\u0438\u043b\u044e, \u043a\u0430\u043a \u0434\u0440\u0443\u0433\u0438\u0435, \u0430 \u043f\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e: <\/b>  <\/p>\n<ul>\n<li>34 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u044b\u0445 \u043e\u043a\u043e\u043d;<\/li>\n<li>23 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0432\u043e\u0437\u043b\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/li>\n<li>20 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0434\u043b\u044f \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0434\u0430\u043d\u043d\u044b\u0445 (\u0438\u043a\u043e\u043d\u043a\u0438, \u0442\u0435\u043a\u0441\u0442 \u0438 \u0434\u0440\u0443\u0433\u043e\u0435);<\/li>\n<li>8 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f\/\u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430;<\/li>\n<li>8 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430;<\/li>\n<li>27 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f\/\u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 (\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438);<\/li>\n<li>15 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438;<\/li>\n<li>18 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c (\u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0433\u0430\u043b\u0435\u0440\u0435\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a);<\/li>\n<li>4 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438;<\/li>\n<li>4 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0435\u0439;<\/li>\n<li>7 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0434\u043b\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043a.<\/li>\n<\/ul>\n<p>  Effeckt.css \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 SCSS \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0435\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442  @keyframes, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0433\u043e \u043a\u043e\u0434 \u043b\u0435\u0433\u0447\u0435 \u0434\u0440\u0443\u0433\u0438\u0445. <\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/h5bp.github.io\/Effeckt.css\/\">Effeckt.css<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Hover.css<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/ianlunn.github.io\/Hover\/\">Hover.css<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Hover.css\" src=\"https:\/\/habrastorage.org\/files\/c74\/325\/81d\/c7432581da354b7b936648ef4404704c.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0415\u0433\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a.<\/p>\n<p>  <b>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u0431\u0438\u0442\u0430 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438:<\/b>  <\/p>\n<ul>\n<li>27 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 2D \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438;<\/li>\n<li>18 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0444\u043e\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/li>\n<li>27 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0438 \u0438\u043a\u043e\u043d\u043a\u043e\u0439;<\/li>\n<li>18 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 Border transitions;<\/li>\n<li>7 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0441 \u0442\u0435\u043d\u044c\u044e;<\/li>\n<li>8 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 (\u043a\u0430\u043a \u0432 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0435);<\/li>\n<li>4 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0437\u0430\u0433\u0438\u0431\u0430\u043d\u0438\u044f \u0443\u0433\u043e\u043b\u043a\u0430.<\/li>\n<\/ul>\n<p>  Hover.css \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 less, scss \u0438 css.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/ianlunn.github.io\/Hover\/\">Hover.css<\/a>.   <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Magic animations<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/minimamente.com\/example\/magic_animations\/\">Magic animations<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Magic animations\" src=\"https:\/\/habrastorage.org\/files\/94e\/20a\/143\/94e20a14315e4018abf5ba0cac8ac083.jpg\"\/><\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 Animate.css. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043e\u043d <b>\u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432:<\/b>  <\/p>\n<ul>\n<li>\u041c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435;<\/li>\n<li>Bling;<\/li>\n<li>\u0421\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b;<\/li>\n<li>3D-\u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u044b;<\/li>\n<li>3D-\u043f\u043e\u0432\u043e\u0440\u043e\u0442\u044b;<\/li>\n<li>Slide;<\/li>\n<li>\u0421\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435\u043c;<\/li>\n<li>\u0421 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c \u0432\u0437\u0440\u044b\u0432\u0430;<\/li>\n<li>\u041f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435;<\/li>\n<li>\u0438 \u0434\u0440\u0443\u0433\u0438\u0435.<\/li>\n<\/ul>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/minimamente.com\/example\/magic_animations\/\">Magic animations<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Awesome<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/pavlyukpetr.com\/awesome\/\">Awesome<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Awesome\" src=\"https:\/\/habrastorage.org\/files\/b89\/2f9\/70c\/b892f970c9c349a8a1dd63ee0e33ea0e.jpg\"\/><\/p>\n<p>  Awesome \u2014 \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0438\u0437 <b>89 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/b> \u043e\u0442 \u0443\u043a\u0440\u0430\u0438\u043d\u0441\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c css. <b>\u041e\u043d\u0438 \u0440\u0430\u0437\u0431\u0438\u0442\u044b \u043d\u0430 12 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439:<\/b>  <\/p>\n<ul>\n<li>Fade;<\/li>\n<li>Slide;<\/li>\n<li>Bounce;<\/li>\n<li>Roll;<\/li>\n<li>Rotbo;<\/li>\n<li>Flip;<\/li>\n<li>Rotate;<\/li>\n<li>Turn;<\/li>\n<li>Back;<\/li>\n<li>Push;<\/li>\n<li>Clip;<\/li>\n<li>Else.<\/li>\n<\/ul>\n<p>  \u0415\u0433\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0434\u0430\u044e\u0449\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/pavlyukpetr.com\/awesome\/\">Awesome<\/a>.<br \/>  <a href=\"https:\/\/habrahabr.ru\/sandbox\/93045\/\">\u0421\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Repaintless<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/szynszyliszys.github.io\/repaintless\/\">Repaintless<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Repaintless\" src=\"https:\/\/habrastorage.org\/files\/cc1\/8b0\/38b\/cc18b038b4b54c44ae0a56417f98006e.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041a\u043e\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 scss. \u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <b>11 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/b>:  <\/p>\n<ul>\n<li>Slide from right;<\/li>\n<li>Slide from left;<\/li>\n<li>Slide from top;<\/li>\n<li>Slide from bottom;<\/li>\n<li>Slide from right bottom;<\/li>\n<li>Slide from right top;<\/li>\n<li>Slide from left bottom;<\/li>\n<li>Slide from left top;<\/li>\n<li>Slide left right;<\/li>\n<li>Slide top bottom.<\/li>\n<\/ul>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/szynszyliszys.github.io\/repaintless\/\">Repaintless<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">All-animation<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/all-animation.github.io\/\">All-animation<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/755\/ab7\/e23\/755ab7e236514aebbf910390ed5073d1.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <b>\u0441 36 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438<\/b> \u0438 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u0445 UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0415\u0433\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 <b>\u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043d\u0430 8 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439:<\/b>  <\/p>\n<ul>\n<li>Bounce;<\/li>\n<li>Perspective;<\/li>\n<li>Fading Entrances;<\/li>\n<li>Rotate;<\/li>\n<li>Agreccives;<\/li>\n<li>Legend;<\/li>\n<li>Portrait.<\/li>\n<\/ul>\n<p>  \u041d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 css.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/all-animation.github.io\/\">All-animation<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Reboundgen<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/dwarcher.github.io\/reboundgen\/examples\/\">Reboundgen<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Reboundgen\" src=\"https:\/\/habrastorage.org\/files\/977\/e19\/204\/977e1920443f43a4be3bf119a0242ad2.jpg\"\/><\/p>\n<p>  \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438\u0437 <b>27 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/b>. \u041f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 <a href=\"http:\/\/facebook.github.io\/rebound-js\/\">Rebound.js \u043e\u0442 facebook<\/a>.<\/p>\n<p>  \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 json-\u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 reboundGet.js. \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u0432\u0435\u0434\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0443\u0436\u0435 \u043f\u043e\u0442\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e css \u0431\u0435\u0437 js.<\/p>\n<p>  \u0418\u0437-\u0437\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 css-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438, \u044f \u0440\u0435\u0448\u0438\u043b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043d\u0435 \u0432 javascript-\u0441\u043f\u0438\u0441\u043e\u043a, \u0430 \u0432 css. <\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/dwarcher.github.io\/reboundgen\/examples\/\">Reboundgen<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Morphodynamics<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/seven-phases-max.github.io\/morphodynamics\/hover.html\">Morphodynamics<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Morphodynamics\" src=\"https:\/\/habrastorage.org\/files\/fb5\/0f3\/f4a\/fb50f3f4a0db4eacbe8ca16e7a47b9e6.jpg\"\/><\/p>\n<p>  Morphodynamics \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <b>47 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439<\/b>. <\/p>\n<p>  <b>\u0412\u0441\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043d\u0430 6 \u0433\u0440\u0443\u043f\u043f:<\/b>  <\/p>\n<ul>\n<li>Miscellaneous;<\/li>\n<li>Background;<\/li>\n<li>Border Transitions;<\/li>\n<li>Shadow Transitions;<\/li>\n<li>2D Transforms;<\/li>\n<li>Bubbles.<\/li>\n<\/ul>\n<p>  <b>\u0418\u043c\u0435\u0435\u0442 16 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0442\u0435\u043c \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/b> \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0443 \u043a\u043d\u043e\u043f\u043e\u043a, \u043c\u0435\u043d\u044e \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0442\u043e\u0432\u0430\u0440\u043e\u0432.<\/p>\n<p>  \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 less.<\/p>\n<p>  \u0421\u0430\u0439\u0442: <a href=\"http:\/\/seven-phases-max.github.io\/morphodynamics\/hover.html\">Morphodynamics<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Css3animateit<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/jackonthe.net\/css3animateit\/\">Css3animateit<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Css3animateit\" src=\"https:\/\/habrastorage.org\/files\/211\/edd\/fa4\/211eddfa4ae94f1db5a87128f9eb149e.jpg\"\/><\/p>\n<p>  \u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439.<\/p>\n<p>  <b>\u0418\u043c\u0435\u0435\u0442 37 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/b>:  <\/p>\n<ul>\n<li>Bounce;<\/li>\n<li>growIn;<\/li>\n<li>FadeIn;<\/li>\n<li>Shake;<\/li>\n<li>RotateIn;<\/li>\n<li>RollIn;<\/li>\n<li>Wiggle;<\/li>\n<li>\u0418 \u0434\u0440\u0443\u0433\u0438\u0435&#8230;<\/li>\n<\/ul>\n<p>  \u041d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 less.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/jackonthe.net\/css3animateit\/\">Css3animateit<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">CSS3 Animation Cheat Sheet<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/justinaguilar.com\/animations\/\">CSS3 Animation Cheat Sheet<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - CSS3 Animation Cheat Sheet\" src=\"https:\/\/habrastorage.org\/files\/211\/edd\/fa4\/211eddfa4ae94f1db5a87128f9eb149e.jpg\"\/><\/p>\n<p>  \u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 <b>16 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/b>  <\/p>\n<ul>\n<li>SlideUp;<\/li>\n<li>Slide Down;<\/li>\n<li>Slide Left;<\/li>\n<li>Slide Right;<\/li>\n<li>Slide Expand Up;<\/li>\n<li>Expand Up;<\/li>\n<li>Fade In;<\/li>\n<li>Expand Open;<\/li>\n<li>Big Entrance;<\/li>\n<li>Hatch;<\/li>\n<li>\u0418 \u0434\u0440\u0443\u0433\u0438\u0435&#8230;<\/li>\n<\/ul>\n<p>  \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043e\u043d\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u044e\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0438\u043a\u043e\u0432. <\/p>\n<p>  \u041a\u0430\u043a \u0438 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445, \u0432 \u043d\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f CSS3  @keyframes.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/justinaguilar.com\/animations\/\">CSS3 Animation Cheat Sheet<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Tuesday<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/shakrmedia.github.io\/tuesday\/\">Tuesday<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Tuesday\" src=\"https:\/\/habrastorage.org\/files\/d35\/e0d\/362\/d35e0d362b694fcd8aa2364ac47005a6.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. <b>\u0418\u043c\u0435\u0435\u0442 9 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432:<\/b>  <\/p>\n<ul>\n<li>FadeIn;<\/li>\n<li>FadeOut;<\/li>\n<li>Expand;<\/li>\n<li>Stamp;<\/li>\n<li>Shrink;<\/li>\n<li>Swing;<\/li>\n<li>DropIn;<\/li>\n<li>Plop;<\/li>\n<li>HingeFlip.<\/li>\n<\/ul>\n<p>  \u0412\u0441\u0435\u0433\u043e \u0432 \u0435\u0433\u043e <b>\u0430\u0440\u0441\u0435\u043d\u0430\u043b\u0435 29 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439<\/b>. \u041d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 less, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u0431\u043e\u0440\u043a\u0443.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/shakrmedia.github.io\/tuesday\/\">Tuesday<\/a>.  <\/div>\n<\/div>\n<h4><b>JS-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/b><\/h4>\n<p>  \u041a\u0430\u043a \u0412\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435, css \u2014 \u044d\u0442\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u044f\u0437\u044b\u043a. \u0412\u0441\u044f \u0435\u0433\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043b\u0438\u043d\u0435\u0439\u043d\u0430 \u0438 \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c css \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443. <\/p>\n<p>  Javascript-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u0443\u0431\u0438\u0440\u0430\u044e\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f css-\u0440\u0435\u0448\u0435\u043d\u0438\u0439. \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 (\u043e\u0434\u0438\u043d \u044d\u0444\u0444\u0435\u043a\u0442 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0441\u044f, \u0434\u0440\u0443\u0433\u043e\u0439 \u043d\u0430\u0447\u0430\u043b\u0441\u044f; \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435).<\/p>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f js-\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c \u043c\u043e\u0436\u043d\u043e \u0442\u043e\u0447\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 3-\u0435\u0439 \u0441\u0435\u043a\u0443\u043d\u0434\u0435. \u0412 css \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435\u043b\u044c\u0437\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u0448\u0430\u0433\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u043c\u0438, \u0430 \u043d\u0435 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u043c\u0438. \u041c\u043e\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d. \u0415\u0441\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442 \u0437\u0430\u0445\u043e\u0447\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u0442\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c (\u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0439 \u043c\u0435\u0436\u0434\u0443 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u043c \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439 \u0441\u0435\u043a\u0443\u043d\u0434\u043e\u0439), \u0430 \u044d\u0442\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0442\u0440\u0430\u0442\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>  Css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 js-\u0440\u0435\u0448\u0435\u043d\u0438\u0439 (\u0434\u0430\u0436\u0435 \u043a\u043e\u0433\u0434\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u0432 GPU). \u041e\u0431 \u044d\u0442\u043e\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0442 Css-trick (\u043f\u043e\u0442\u0435\u0440\u044f\u043b \u0441\u0441\u044b\u043b\u043a\u0443, \u0438\u0449\u044e).<\/p>\n<p>  \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u043d\u043e <b>\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e \u0442\u0438\u043f\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f<\/b> (\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438 \u0443\u0437\u043a\u043e\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f) <b>\u0438 \u0438\u0445 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/b> (\u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0435). <\/p>\n<h5><b>\u041f\u0440\u043e\u0441\u0442\u044b\u0435:<\/b><\/h5>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Transformicons<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/www.transformicons.com\/\">Transformicons<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Transformicons\" src=\"https:\/\/habrastorage.org\/files\/b36\/8d9\/d40\/b368d9d401484824baaa80f14b9a9808.jpg\"\/><\/p>\n<p>  <b>\u0414\u0432\u0430\u0434\u0446\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e-\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 8 \u0433\u0440\u0443\u043f\u043f:<\/b>  <\/p>\n<ul>\n<li>Menu;<\/li>\n<li>Grid;<\/li>\n<li>Add\/remove;<\/li>\n<li>Mail;<\/li>\n<li>Scroll indicators;<\/li>\n<li>Forms;<\/li>\n<li>Video;<\/li>\n<li>Loaders.<\/li>\n<\/ul>\n<p>  \u042d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0438 js-\u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u041f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 online-builder.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/www.transformicons.com\/\">Transformicons<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Snabbt.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/daniel-lundin.github.io\/snabbt.js\/\">Snabbt.js<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Snabbt.js\" src=\"https:\/\/habrastorage.org\/files\/626\/db0\/14d\/626db014dc6e4e1cb60c03007706e8ef.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c API. <b>\u0417\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435\u0433\u043e 5kb<\/b>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 3dmatrix. <b>\u0417\u0430\u044f\u0432\u043b\u0435\u043d\u043e 60 FPS<\/b>. \u041c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043f\u043e\u0434\u0440\u044f\u0434 \u0447\u0435\u0440\u0435\u0437 \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (\u043a\u0430\u043a \u0432 jQuery).<\/p>\n<p>  \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u044e, \u0448\u0438\u0440\u0438\u043d\u0443, \u0432\u044b\u0441\u043e\u0442\u0443 \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c, \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b.<\/p>\n<p>  <b>\u041e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 5 easing functions:<\/b>  <\/p>\n<ul>\n<li>linear(default);<\/li>\n<li>ease;<\/li>\n<li>easeIn;<\/li>\n<li>easeOut;<\/li>\n<li>spring.<\/li>\n<\/ul>\n<p>  \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 js-\u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/daniel-lundin.github.io\/snabbt.js\/\">Snabbt.js<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Move.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/visionmedia.github.io\/move.js\/\">Move.js<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Move.js\" src=\"https:\/\/habrastorage.org\/files\/941\/30a\/c55\/94130ac55ebb433e8b098eef7e8a2545.jpg\"\/><\/p>\n<p>  \u0415\u0449\u0451 \u043e\u0434\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0431\u0435\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043d\u043e \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (\u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430, \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u043e\u0440\u0434\u044e\u0440\u0430 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435). \u0412\u0435\u0441\u0438\u0442 13-14 \u043ab.<\/p>\n<p>  <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 30 easing functions:<\/b>  <\/p>\n<ul>\n<li>in;<\/li>\n<li>out;<\/li>\n<li>in-out;<\/li>\n<li>snap;<\/li>\n<li>linear;<\/li>\n<li>ease-in-quad;<\/li>\n<li>ease-in-cubic;<\/li>\n<li>ease-in-quart;<\/li>\n<li>ease-in-quint;<\/li>\n<li>ease-in-sine;<\/li>\n<li>ease-out-quad;<\/li>\n<li>ease-out-cubic;<\/li>\n<li>ease-out-quart;<\/li>\n<li>ease-out-quint;<\/li>\n<li>ease-out-sine;<\/li>\n<li>\u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435&#8230;<\/li>\n<\/ul>\n<p>  \u0422\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 Cubic-bezier.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/visionmedia.github.io\/move.js\/\">Move.js<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Animo.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/labs.bigroomstudios.com\/libraries\/animo-js\">Animo.js<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Animo.js\" src=\"https:\/\/habrastorage.org\/files\/8e0\/b4a\/78e\/8e0b4a78e126458f826c35e36802e54d.jpg\"\/><\/p>\n<p>  \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f \u0432 2013 \u0433\u043e\u0434\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043f\u043b\u0430\u0433\u0438\u043d \u043a jQuery 2+. \u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u043e\u0439 \u043d\u0430\u0434 Animate.css.<\/p>\n<p>  <b>\u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f: <\/b>  <\/p>\n<ul>\n<li>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f (\u043c\u043e\u0436\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e);<\/li>\n<li>\u0412\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/li>\n<li>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u0439 (\u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0434\u0432\u0430 \u0440\u0430\u0437\u0430 \u0438\u043b\u0438 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e);<\/li>\n<li>Callback \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0432 \u043d\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u043d\u043e\u0432\u0430 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u043a Animo.js);<\/li>\n<li>\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 (\u0433\u0440\u0430\u0434\u0443\u0441 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430, \u0441\u0438\u043b\u0430 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435);<\/li>\n<li>Timing-\u0444\u0443\u043d\u043a\u0446\u0438\u044f.<\/li>\n<\/ul>\n<p>  <b>Animo.js \u0432\u0435\u0441\u0438\u0442 7.2 kb.<\/b><\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/labs.bigroomstudios.com\/libraries\/animo-js\">Animo.js<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Ani.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/anijs.github.io\/\">Ani.js<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Ani.js\" src=\"https:\/\/habrastorage.org\/files\/5b5\/9c5\/4b9\/5b59c54b930645ae9c60abfada1ffc3f.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u0412\u043c\u0435\u0441\u0442\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438\u043b\u0438 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 javascript, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0430\u0442\u0430-\u0430\u0442\u0440\u0438\u0431\u0443\u0442 (data-anijs) \u0438 \u0432\u043d\u0435\u0441\u0442\u0438 \u0432 \u043d\u0435\u0433\u043e \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e:<\/p>\n<p>  <b>if:<\/b> click, <b>on:<\/b> h1, <b>do:<\/b> pulse animated, <b>to:<\/b> h2<\/p>\n<p>  \u0413\u0434\u0435 (<a href=\"https:\/\/github.com\/anijs\/anijs\/wiki\/The-language\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u044f\u0437\u044b\u043a \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/a>):  <\/p>\n<ul>\n<li><b>if<\/b> \u2014 \u043b\u044e\u0431\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435;<\/li>\n<li><b>on<\/b> \u2014 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f;<\/li>\n<li><b>do<\/b> \u2014 \u044d\u0444\u0444\u0435\u043a\u0442 (\u043c\u043e\u0436\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e);<\/li>\n<li><b>to<\/b> \u2014 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 (on \u0438 to \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0438 \u0440\u0430\u0437\u043d\u043e\u0435, \u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435).<\/li>\n<\/ul>\n<p>  \u0412 \u043e\u0434\u043d\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u0439.<\/p>\n<p>  <b>\u0415\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u043d\u0430 15 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439<\/b>:  <\/p>\n<ul>\n<li>attention_seekers;<\/li>\n<li>bouncing_entrances;<\/li>\n<li>bouncing_exits;<\/li>\n<li>fading_entrances;<\/li>\n<li>fading_exits;<\/li>\n<li>flippers;<\/li>\n<li>lightspeed;<\/li>\n<li>rotating;<\/li>\n<li>rotating_entrances;<\/li>\n<li>rotating_exits;<\/li>\n<li>specials;<\/li>\n<li>zooming_entrances;<\/li>\n<li>zooming_exits;<\/li>\n<li>sliding_entrances;<\/li>\n<li>sliding_exits.<\/li>\n<\/ul>\n<p>  <b>\u0412\u0441\u0435\u0433\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 70 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/b>. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0438\u0445 online-builder (http:\/\/anicollection.github.io\/) \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0432\u0435\u0440\u0441\u0438\u044e AniJS.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/anijs.github.io\/\">Ani.js<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Velocity<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/julian.com\/research\/velocity\/\">Velocity<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Velocity.js\" src=\"https:\/\/habrastorage.org\/files\/3f0\/8ba\/e04\/3f08bae0488c45aaa4ccb20a7807c196.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043f\u043b\u0430\u0433\u0438\u043d \u043a jQuery. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 ie8+ \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430\u0445, \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445 \u0438 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0430\u0445. <\/p>\n<p>  <b>\u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e:<\/b>  <\/p>\n<ul>\n<li>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u043f\u0430\u043a\u0435\u0442\u044b;<\/li>\n<li>\u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 requestAnimationFrame;<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043b\u0443\u0447\u0448\u0435\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/li>\n<\/ul>\n<p>  \u041a\u0430\u043a \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445, \u043f\u0440\u0438 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, easing \u0438 callback \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0437\u0430\u0446\u0438\u043a\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435).<\/p>\n<p>  <b>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/b>  <\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/improving-ui-animation-workflow-velocity-js\/\">\u041e VelocityJS \u043d\u0430 Css-tricks<\/a>;<\/li>\n<li><a href=\"http:\/\/codepen.io\/julianshapiro\/full\/oHaCy\/\">Animation Tester<\/a>.<\/li>\n<\/ul>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/julian.com\/research\/velocity\/\">Velocity<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Animatic.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/lvivski.com\/animatic\/\">Animatic.js<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Animatic.js\" src=\"https:\/\/habrastorage.org\/files\/97a\/494\/53f\/97a49453f9a94c828bcffbefd438c257.jpg\"\/><\/p>\n<p>  \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (7 kb). \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 Chrome, Safari, Firefox, Internet Explorer 10 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b. \u0414\u043b\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e opacity \u0438 2D\/3D \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043e\u0434\u043d\u0438 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432.<\/p>\n<p>  <b>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c:<\/b>  <\/p>\n<ul>\n<li>\u042d\u0444\u0444\u0435\u043a\u0442 (translate, rotate, scale and opacity);<\/li>\n<li>\u0412\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f;<\/li>\n<li>Easing function (25 \u0442\u0438\u043f\u043e\u0432);<\/li>\n<li>\u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0443.<\/li>\n<\/ul>\n<p>  \u0414\u043b\u044f \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u0438\u0437\u0438\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n<p>  \u0412 Animo.js \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439: \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c, \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0430\u0443\u0437\u0443 \u0438 \u0432\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/lvivski.com\/animatic\/\">Animatic.js<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">TransitJS<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/ricostacruz.com\/jquery.transit\/\">TransitJS<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - TransitJS\" src=\"https:\/\/habrastorage.org\/files\/37c\/867\/0af\/37c8670af21c42caab21ab8c521734f8.jpg\"\/><\/p>\n<p>  \u041f\u043b\u0430\u0433\u0438\u043d \u043a jQuery \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0432\u044b\u0441\u043e\u043a\u0438\u0445 FPS \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 (\u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f).<\/p>\n<p>  <b>\u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/b>  <\/p>\n<ul>\n<li>x (px) \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u043e \u043e\u0441\u0438 X;<\/li>\n<li>y (px) \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u043e \u043e\u0441\u0438 Y;<\/li>\n<li>translate (x, y) \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u043e \u0434\u0432\u0443\u043c \u043e\u0441\u044f\u043c;<\/li>\n<li>rotate (deg) \u2014 \u043f\u043e\u0432\u043e\u0440\u043e\u0442;<\/li>\n<li>rotateX (deg) \u2014 \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u043f\u043e \u043e\u0441\u0438 X;<\/li>\n<li>rotateY (deg) \u2014 \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u043f\u043e \u043e\u0441\u0438 Y;<\/li>\n<li>rotate3d (x, y, z, deg) \u2014 3D \u043f\u043e\u0432\u043e\u0440\u043e\u0442;<\/li>\n<li>scale (x, [y]) \u2014 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435\/\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/li>\n<li>perspective (px) \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u044b;<\/li>\n<li>skewX (deg) \u2014 \u043d\u0430\u043a\u043b\u043e\u043d \u043f\u043e \u043e\u0441\u0438 X;<\/li>\n<li>skewY (deg) \u2014 \u043d\u0430\u043a\u043b\u043e\u043d \u043f\u043e \u043e\u0441\u0438 Y.<\/li>\n<\/ul>\n<p>  <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 29 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/b><\/p>\n<p>  \u041f\u043b\u0430\u0433\u0438\u043d \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0435 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 (.transition().transition().transition()&#8230;). <\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/ricostacruz.com\/jquery.transit\/\">TransitJS<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Zurb Motion-UI<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/zurb.com\/playground\/motion-ui\">Zurb Motion-UI<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Zurb Motion-UI\" src=\"https:\/\/habrastorage.org\/files\/252\/b2a\/07b\/252b2a07b3834965bb5d99c442420080.jpg\"\/><\/p>\n<p>  \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043e\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0435\u0439 css-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u00abFoundation\u00bb.<\/p>\n<p>  <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 5 \u0442\u0438\u043f\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/b>  <\/p>\n<ul>\n<li>Slide;<\/li>\n<li>Scale;<\/li>\n<li>Hinge;<\/li>\n<li>Fade;<\/li>\n<li>Spin.<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <b>3 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438<\/b> (normal, slow, fast) \u0438 <b>3-\u0438 easing-\u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/b> (linear, ease, bounce). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 css-\u043a\u043b\u0430\u0441\u0441\u044b \u0438\u043b\u0438 js-\u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/zurb.com\/playground\/motion-ui\">Zurb Motion-UI<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Shift.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/shift.octavector.co.uk\/\">Shift.js<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Shift.js\" src=\"https:\/\/habrastorage.org\/files\/9c7\/974\/aa1\/9c7974aa13554167afacdfc6f42eeb3f.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0447\u0435\u0440\u0435\u0437 data-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b:  <\/p>\n<ul>\n<li>data-animation \u2014 \u044d\u0444\u0444\u0435\u043a\u0442;<\/li>\n<li>data-delay \u2014 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430;<\/li>\n<li>data-duration \u2014 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/li>\n<\/ul>\n<p>  <b>\u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 15 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/b><\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/shift.octavector.co.uk\/\">Shift.js<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">AnimatePlus<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"https:\/\/github.com\/bendc\/animateplus\">AnimatePlus<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - AnimatePlus\" src=\"https:\/\/habrastorage.org\/files\/422\/4e8\/c7e\/4224e8c7e4574b8e852f46ba952b680b.jpg\"\/><\/p>\n<p>  \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f (2.8 kb) \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 css\/svg \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0431\u0435\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  <b>\u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c 15 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438:<\/b>  <\/p>\n<ul>\n<li>translateX, translateY, translateZ;<\/li>\n<li>scale, scaleX, scaleY, scaleZ;<\/li>\n<li>rotate, rotateX, rotateY, rotateZ;<\/li>\n<li>skewX, skewY;<\/li>\n<li>opacity;<\/li>\n<li>perspective.<\/li>\n<\/ul>\n<p>  <b>\u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f:<\/b>  <\/p>\n<ul>\n<li>el \u2014 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442;<\/li>\n<li>duration \u2014 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/li>\n<li>delay \u2014 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/li>\n<li>easing \u2014 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f (29 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432);<\/li>\n<li>loop \u2014 \u0434\u043b\u044f \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/li>\n<li>direction \u2014 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 (normal, reverse, alternate);<\/li>\n<li>begin \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0430\u044f\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/li>\n<li>complite \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0430\u044f\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/li>\n<\/ul>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"https:\/\/github.com\/bendc\/animateplus\">AnimatePlus<\/a>.  <\/div>\n<\/div>\n<h5><b>\u0421\u043b\u043e\u0436\u043d\u044b\u0435:<\/b><\/h5>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">GreenSock<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/www.greensock.com\/\">GreenSock<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - GreenSock\" src=\"https:\/\/habrastorage.org\/files\/fa3\/00c\/e71\/fa300ce719e44225a1dd4b4cb34308c4.jpg\"\/><\/p>\n<p>  \u041f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0421\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437:  <\/p>\n<ul>\n<li><b>TweenMax<\/b> \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439;<\/li>\n<li><b>TweenLite<\/b> \u2014 \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u043d\u044b\u0439 TweenMax;<\/li>\n<li><b>TimeLineMax<\/b> \u2014 \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439;<\/li>\n<li><b>TimeLineLite<\/b> \u2014 \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f TimeLineMax.<\/li>\n<\/ul>\n<p>  <b>\u041a \u043d\u0435\u0439 \u0438\u0434\u0435\u0442 19 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432<\/b> (\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432 DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 svg-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435).<\/p>\n<p>  \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043e\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0441\u044f \u0434\u043b\u044f flash, \u043d\u043e \u043f\u043e\u0442\u043e\u043c \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u043b\u0438 \u043d\u0430 web-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438.<\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u043b\u0430\u0442\u044f\u0442 \u0437\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0412 \u0438\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043a\u0443\u043f\u0430\u0442\u044c \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u044e.<\/p>\n<p>  \u0412 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432.<\/p>\n<p>  \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0432\u0435\u0434\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 \u0438\u0445 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430.<\/p>\n<p>  <b>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/b>  <\/p>\n<ul>\n<li><a href=\"https:\/\/habrahabr.ru\/post\/144466\/\">\u041e GreenSock \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c<\/a>;<\/li>\n<li><a href=\"https:\/\/ihatetomatoes.net\/product\/greensock-101\/\">\u0412\u0438\u0434\u0435\u043e\u043a\u0443\u0440\u0441 \u043d\u0430 en<\/a>.<\/li>\n<\/ul>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/www.greensock.com\/\">GreenSock<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">SamsaraJs<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/samsarajs.org\/\">SamsaraJs<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Samsara.js\" src=\"https:\/\/habrastorage.org\/files\/4df\/339\/c57\/4df339c5775b4e5bb63ea71ea4778f15.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 javascript. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e\u043d \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u0435\u043d.<\/p>\n<p>  <b>\u0421\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439:<\/b>  <\/p>\n<ul>\n<li>Samsara.DOM.Surface \u2014 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/li>\n<li>Samsara.DOM.Context \u2014 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u0443\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 Surface;<\/li>\n<li>Samsara.Core.Transitionable \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430) Surface-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441 \u0442\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438;<\/li>\n<li>Samsara.Core.Transform \u2014 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 css-transform \u0441\u0432\u043e\u0439\u0441\u0442\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 Transitionable);<\/li>\n<li>MouseInput \u2014 \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043c\u044b\u0448\u043a\u0438;<\/li>\n<li>TouchInput \u2014 \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u043f\u0440\u0438\u043a\u043e\u0441\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u043a \u044d\u043a\u0440\u0430\u043d\u0443;<\/li>\n<li>ScrollInput \u2014 \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043d\u0430 scroll-\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435;<\/li>\n<li>PinchInput \u2014 \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u0434\u0432\u0443\u043c\u044f \u043f\u0430\u043b\u044c\u0446\u0430\u043c\u0438 \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443;<\/li>\n<li>RotateInput \u2014 \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0434\u0432\u0443\u043c\u044f \u043f\u0430\u043b\u044c\u0446\u0430\u043c\u0438 \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443;<\/li>\n<li>ScaleInput \u2014 \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435\/\u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u043f\u0430\u043b\u044c\u0446\u0430\u043c\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/li>\n<\/ul>\n<p>  <b>Transitionables \u0438\u043c\u0435\u0435\u0442 9 easing \u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/b> (\u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435):  <\/p>\n<ul>\n<li>linear;<\/li>\n<li>easeIn;<\/li>\n<li>easeOut;<\/li>\n<li>easeInOut;<\/li>\n<li>easeOutBounce;<\/li>\n<li>easeInCubic;<\/li>\n<li>easeOutCubic;<\/li>\n<li>easeInOutCubic;<\/li>\n<li>easeOutWall.<\/li>\n<\/ul>\n<p>  \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043d\u0435\u043c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438: <a href=\"http:\/\/samsarajs.org\/docs\/getting-started.html\">samsarajs.org\/docs\/getting-started.html<\/a>.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/samsarajs.org\/\">SamsaraJs<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Popmotion<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"https:\/\/popmotion.io\/\">Popmotion<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Popmotion\" src=\"https:\/\/habrastorage.org\/files\/708\/fd7\/bb4\/708fd7bb4f134d048d8b0fbbfe1baef8.jpg\"\/><\/p>\n<p>  <b>Popmotion<\/b> \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. <\/p>\n<p>  <b>\u0412\u0441\u0435 \u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043d\u0430 5 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439:<\/b>  <\/p>\n<ul>\n<li>Standart;<\/li>\n<li>Actions;<\/li>\n<li>Roles;<\/li>\n<li>Primitives;<\/li>\n<li>Plugins.<\/li>\n<\/ul>\n<p>  <b>Standart:<\/b>  <\/p>\n<ul>\n<li>ui \u2014 \u044f\u0434\u0440\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438;<\/li>\n<li>Actor \u2014 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442;<\/li>\n<li>Iterator \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c;<\/li>\n<li>Sequence \u2014 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u043d\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/li>\n<li>calc \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0430\u0441\u0447\u0435\u0442\u0430.<\/li>\n<\/ul>\n<p>  <b>Actions:<\/b>  <\/p>\n<ul>\n<li>Simulate \u2014 \u0441\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u0444\u0438\u0437\u0438\u043a\u0438;<\/li>\n<li>Track \u2014 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043c\u044b\u0448\u0438 \u043f\u0440\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/li>\n<li>Tween \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0430\u043a\u0442\u0435\u0440\u043e\u0432 (Actor).<\/li>\n<\/ul>\n<p>  <b>Roles:<\/b>  <\/p>\n<ul>\n<li>css \u2014 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432;<\/li>\n<li>attr \u2014 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432;<\/li>\n<li>svg \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 svg \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432;<\/li>\n<li>drawPath \u2014 \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 svg \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/li>\n<\/ul>\n<p>  <b>Primitives:<\/b>  <\/p>\n<ul>\n<li>Action \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 (Tween\/Simulate\/Track) \u0443 \u0430\u043a\u0442\u0435\u0440\u043e\u0432 (Actor);<\/li>\n<li>Easing \u2014 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439;<\/li>\n<li>Input \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f Actor, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435;<\/li>\n<li>Process \u2014 \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0434\u0440\u043e\u0432\u043e\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430;<\/li>\n<li>Role \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u043a\u0442\u0435\u0440\u0430\u043c (Actor) \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c (css, attr \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435).<\/li>\n<\/ul>\n<p>  <b>Plugins:<\/b>  <\/p>\n<ul>\n<li>Scroll To \u2014 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/li>\n<\/ul>\n<p>  <a href=\"https:\/\/popmotion.io\/guides\/feature-comparison\">\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 Popmotion, Velocity, TweenLite \u0438 TweenMax.https<\/a>.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"https:\/\/popmotion.io\/\">Popmotion<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Mo.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/mojs.io\/\">Mo.js<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Mo.js\" src=\"https:\/\/habrastorage.org\/files\/ada\/f21\/0e4\/adaf210e4f3b4dd3bf052adc1d7aafaf.jpg\"\/><\/p>\n<p>  \u041e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0443 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0415\u0451 \u0438\u0437\u044e\u043c\u0438\u043d\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e <b>\u043a\u0440\u0438\u0432\u044b\u0435<\/b> (easing functions) <b>\u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 svg-\u043b\u0438\u043d\u0438\u0438, \u0430 \u043d\u0435 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 css-\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f<\/b>. <\/p>\n<p>  \u041a\u0430\u043a \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 css \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c easing functions \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0434\u0432\u0443\u043c\u044f \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f (\u0438 \u0438\u0441\u043a\u0440\u0438\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e \u043d\u0438\u043c). \u041d\u043e \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0438\u0437 5 \u0442\u043e\u0447\u0435\u043a \u0434\u043b\u044f \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0438\u0440\u0430? \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u00ab\u043a\u043e\u0441\u0442\u044b\u043b\u0438\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043a\u043e\u0434 \u0432 \u0441\u043b\u043e\u0436\u043d\u043e\u0435, \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0438 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0435 \u00ab\u0447\u0443\u0434\u043e\u00bb?<\/p>\n<p>  <b>Mo.js<\/b> \u0440\u0435\u0448\u0438\u043b \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438\u0437\u044f\u0449\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c. \u0412\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f svg-\u043b\u0438\u043d\u0438\u044f\u043c\u0438. \u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0438\u0441\u043a\u0440\u0438\u0432\u043b\u0435\u043d\u0438\u0439. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0430 \u0432\u0445\u043e\u0434\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 svg \u043a\u043e\u0434\/\u0444\u0430\u0439\u043b \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u0443\u044e \u0444\u0438\u0437\u0438\u043a\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0438\u0440\u0430.<\/p>\n<p>  \u0412 \u043e\u0434\u043d\u043e\u0439 Tween-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 Mo.js \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u2014 \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u0440\u0438\u0432\u044b\u0435. \u042d\u0442\u043e \u0434\u0430\u0435\u0442 \u0448\u0430\u043d\u0441 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u0434\u0438\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0430 \u0438\u0445 \u0441\u0430\u0439\u0442\u0435 \u043f\u043e\u043a\u0430 \u0435\u0449\u0451 \u043c\u0430\u043b\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f API. \u0420\u0430\u0434\u0443\u0435\u0442 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d \u0443\u0436\u0435 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f. <\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/mojs.io\/\">Mo.js<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Shifty.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/jeremyckahn.github.io\/shifty\/\">Shifty.js<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Shifty.js\" src=\"https:\/\/habrastorage.org\/files\/3ca\/886\/b61\/3ca886b61aeb4d809abcaa0f606a35a9.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0432 4kb. \u041e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <b>\u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/b>:  <\/p>\n<ul>\n<li>\u0418\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438;<\/li>\n<li>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c\/\u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0442\u044c\/\u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c);<\/li>\n<li>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0448\u0430\u0433\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c\u0438.<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Tweenable \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439. <\/p>\n<p>  \u041a \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0449\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:  <\/p>\n<ul>\n<li><b>shifty.token.js<\/b> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, +25px, \u0430 \u043d\u0435 +25; rgb(0,0,0) \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435);<\/li>\n<li><b>shifty.interpolate.js<\/b> \u2014 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u043e\u0434\u0438\u043d \u043a\u0430\u0434\u0440 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 (\u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438);<\/li>\n<li><b>shifty.bezier.js<\/b> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0440\u0438\u0432\u044b\u0435 cubic-bezier;<\/li>\n<li><b>shifty.formulas.js<\/b> \u2014 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 easing functions.<\/li>\n<\/ul>\n<p>  \u041d\u0430 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b <a href=\"http:\/\/rekapi.com\/\">Rekapi<\/a>).<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/jeremyckahn.github.io\/shifty\/\">Shifty.js<\/a>.  <\/div>\n<\/div>\n<h4><b>\u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/b><\/h4>\n<p>  \u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u0430\u0439\u0442\u043e\u0432 \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0438 \u043a\u043e\u043b\u043b\u0435\u0433 \u043f\u043e \u0446\u0435\u0445\u0443 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u0431\u044b\u0441\u0442\u0440\u043e\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<h5><b><a href=\"http:\/\/bouncejs.com\/\">Bounce.js<\/a><\/b><\/h5>\n<p>  <img decoding=\"async\" alt=\"\u0441\u0430\u0439\u0442 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Bounce.js\" src=\"https:\/\/habrastorage.org\/files\/9c2\/912\/4e3\/9c29124e355044c087fcd83763832b98.jpg\"\/><\/p>\n<p>  Online-\u0441\u0435\u0440\u0432\u0438\u0441 \u00abBounce.js\u00bb \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0437\u044f\u0449\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0412 \u043d\u0435\u043c \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u00abAdd component\u00bb <b>\u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438:<\/b>  <\/p>\n<ul>\n<li>\u0422\u0438\u043f (scale, translate, rotate, skew);<\/li>\n<li>Easing (bounse, sway, hard bounse, hard sway,);<\/li>\n<li>Duration;<\/li>\n<li>Delay;<\/li>\n<li>Bounces;<\/li>\n<li>\u0418\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/li>\n<\/ul>\n<p>  \u0421\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 css.<\/p>\n<h5><b><a href=\"http:\/\/cssanimate.com\/\">Css-animate<\/a><\/b><\/h5>\n<p>  <img decoding=\"async\" alt=\"\u0441\u0430\u0439\u0442 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Css-animate\" src=\"https:\/\/habrastorage.org\/files\/3fa\/12f\/a70\/3fa12fa709d04809bac1f40c291e670f.jpg\"\/><\/p>\n<p>  \u0423\u0434\u043e\u0431\u043d\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u043d\u0443\u044e \u043e\u0441\u044c \u0441 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0448\u043a\u0430\u043b\u0443 \u0438 \u043f\u0430\u043d\u0435\u043b\u044c \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u041f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043a\u0430\u043a \u043e\u0431\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0442\u0430\u043a \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u0442\u0430\u043f\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (keyframes).<\/p>\n<p>  Css-\u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430\u043c\u0438 \u0438 \u0431\u0435\u0437.<\/p>\n<h5><b><a href=\"http:\/\/jeremyckahn.github.io\/stylie\/\">Stylie<\/a> \u0438 <a href=\"http:\/\/jeremyckahn.github.io\/mantra\/\">Mantra<\/a><\/b><\/h5>\n<p>  <img decoding=\"async\" alt=\"\u0441\u0430\u0439\u0442 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Stylie \u0438 Mantra\" src=\"https:\/\/habrastorage.org\/files\/d0f\/273\/b3f\/d0f273b3f8244e2f8bd3a037b5ef29e9.jpg\"\/><\/p>\n<p>  \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0421\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 css (\u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430\u043c\u0438 \u0438 \u0431\u0435\u0437) \u0438\u043b\u0438 \u0432 rekapi. <\/p>\n<p>  <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/b>  <\/p>\n<ul>\n<li>Opacity;<\/li>\n<li>Rotate;<\/li>\n<li>Scale;<\/li>\n<li>Skew;<\/li>\n<li>Translate.<\/li>\n<\/ul>\n<p>  \u041c\u043d\u0435 \u043e\u043d \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0438 \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c.<\/p>\n<h4><b>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0447\u0430\u0441\u0442\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432<\/b><\/h4>\n<p>  \u0412 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0443\u0437\u043a\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u00ab\u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0435\u00bb. \u0418\u043c\u0435\u043d\u043d\u043e \u0438\u0445 \u043c\u044b \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<h5><b>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u043e\u0432<\/b><\/h5>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Spinkit<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/tobiasahlin.com\/spinkit\/\">Spinkit<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 - Spinkit\" src=\"https:\/\/habrastorage.org\/files\/b61\/be8\/cdc\/b61be8cdca9c49409d5430f9e5516a72.jpg\"\/><\/p>\n<p>  Spinkit \u2014 \u044d\u0442\u043e <b>\u043d\u0430\u0431\u043e\u0440 \u0438\u0437 11 css-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432<\/b>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043e\u0447\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0412 \u043d\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f translate \u0438 opacity, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 GPU, \u0430 \u043d\u0435 \u0432 CPU. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 scss.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/tobiasahlin.com\/spinkit\/\">Spinkit<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Css-loaders<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/projects.lukehaas.me\/css-loaders\/\">Css-loaders<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 - Css-loaders\" src=\"https:\/\/habrastorage.org\/files\/7d1\/b53\/71e\/7d1b5371ebaf45f7abdd7b80c1732485.jpg\"\/><\/p>\n<p>  \u041a\u0430\u043a \u0438 \u043f\u0440\u043e\u0448\u043b\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, CSS-loaders \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 less. <b>\u0412 \u0441\u0432\u043e\u0435\u043c \u0430\u0440\u0441\u0435\u043d\u0430\u043b\u0435 \u043e\u043d \u0438\u043c\u0435\u0435\u0442 6 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439.<\/b><\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/projects.lukehaas.me\/css-loaders\/\">Css-loaders<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Loaders<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"https:\/\/connoratherton.com\/loaders\">Loaders<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 - Loaders\" src=\"https:\/\/habrastorage.org\/files\/145\/a78\/756\/145a78756a484999ae5a666d17899ff2.jpg\"\/><\/p>\n<p>  \u0415\u0449\u0451 \u043e\u0434\u043d\u0430 css-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <b>\u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u043e\u0432 \u0438\u0437 28 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432<\/b>. \u041d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 scss.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"https:\/\/connoratherton.com\/loaders\">Loaders<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Whirl<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/jh3y.github.io\/whirl\/\">Whirl<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 - Whirl\" src=\"https:\/\/habrastorage.org\/files\/11a\/965\/aaa\/11a965aaaf974c6daf62d3b1b5877568.jpg\"\/><\/p>\n<p>  Whirl \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. <b>\u0421\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 19 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/b> \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u0430 jade, less \u0438 scss<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/jh3y.github.io\/whirl\/\">Whirl<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Preloaders<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/stas-melnikov.ru\/preloaders\/\">Preloaders<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 - Preloaders\" src=\"https:\/\/habrastorage.org\/files\/c54\/9db\/758\/c549db7585bc407b95047c5ab02f7c16.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043e\u0442 \u0421\u0442\u0430\u0441\u0430 \u041c\u0435\u043b\u044c\u043d\u0438\u043a\u043e\u0432\u0430. <b>\u0421\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 27 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445<\/b> \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u041a\u0440\u043e\u043c\u0435 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435, \u043d\u043e \u043e\u043d\u0438 \u0443\u0436\u0435 \u043f\u043b\u0430\u0442\u043d\u044b\u0435.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/stas-melnikov.ru\/preloaders\/\">Preloaders<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Shelleylowe css-animations<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/shelleylowe.com\/css-animations\/\">Shelleylowe css-animations<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 - Shelleylowe css-animations\" src=\"https:\/\/habrastorage.org\/files\/31a\/fa9\/aa1\/31afa9aa1db84091a4858f2191683a64.jpg\"\/><\/p>\n<p>  \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0432\u0441\u0435\u0445 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432\u0441\u0435 \u0435\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e. <b>\u0418\u043c\u0435\u044e\u0442\u0441\u044f 7 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432.<\/b> \u041d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c css.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/shelleylowe.com\/css-animations\/\">Shelleylowe css-animations<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<h5><b>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430<\/b><\/h5>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Textillate<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/jschr.github.io\/textillate\/\">Textillate<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 - Textillate\" src=\"https:\/\/habrastorage.org\/files\/938\/c65\/296\/938c65296e0340a1a6e97290aa3dabc7.jpg\"\/><\/p>\n<p>  \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 js-\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u044b css-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Animate.css. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u0435.<\/p>\n<p>  <b>\u0415\u0451 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u0430\u0445 \u0438\u0437 1-2 \u0441\u0442\u0440\u043e\u0447\u043a\u0438<\/b>, \u0442\u0430\u043a \u043a\u0430\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043e\u043d \u043a\u0430\u0436\u0434\u0443\u044e \u0431\u0443\u043a\u0432\u0443 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439. \u041f\u0440\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u0445 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/jschr.github.io\/textillate\/\">Textillate<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Blast<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/julian.com\/research\/blast\/\">Blast<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 - Blast\" src=\"https:\/\/habrastorage.org\/files\/f25\/453\/6ce\/f254536ce9ce49b7903a8e2ba824088b.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439. \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u043d\u043e \u0438 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u0438 \u0431\u0443\u043a\u0432\u044b. <\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/julian.com\/research\/blast\/\">Blast<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<h5><b>\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435<\/b><\/h5>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">CssShake<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/elrumordelaluz.github.io\/csshake\/\">CssShake<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0442\u0440\u044f\u0441\u043a\u0438 - CssShake\" src=\"https:\/\/habrastorage.org\/files\/46b\/fc2\/903\/46bfc290316d4853a801bd0647b214da.jpg\"\/><\/p>\n<p>  CssShake \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f <b>\u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0442\u0440\u044f\u0441\u043a\u0438<\/b> (shake). \u0412\u0441\u0435\u0433\u043e \u0438\u0445 <b>11<\/b>. \u041d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 scss.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/elrumordelaluz.github.io\/csshake\/\">CssShake<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Odometer<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/github.hubspot.com\/odometer\/docs\/welcome\/\">Odometer<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Odometer\" src=\"https:\/\/habrastorage.org\/files\/dcb\/b9f\/941\/dcbb9f9414024e8cb8fb62986fbd65c1.jpg\"\/><\/p>\n<p>  Js-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0431\u0435\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439. \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043e\u0442\u0441\u0447\u0435\u0442\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438\u043b\u0438 \u0432 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u0445. \u0415\u0441\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0442\u0435\u043c\u044b \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 sass \u0438 coffeeScript.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/github.hubspot.com\/odometer\/docs\/welcome\/\">Odometer<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Iconate<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/bitshadow.github.io\/iconate\/\">Iconate<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Iconate\" src=\"https:\/\/habrastorage.org\/files\/ed5\/755\/10c\/ed575510c72446d3bad2e5a42a306e03.jpg\"\/><\/p>\n<p>  Iconate \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 (icons). <b>\u041f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 19 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/b> \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 javascript \u0438 css-\u043a\u043b\u0430\u0441\u0441\u0430\u0445.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/bitshadow.github.io\/iconate\/\">Iconate<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Rocket CSS<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/minimamente.com\/example\/rocket\/\">Rocket CSS<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Rocket CSS\" src=\"https:\/\/habrastorage.org\/files\/26b\/a38\/f56\/26ba38f563184144b1637214ffc7159a.jpg\"\/><\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a \u0434\u0440\u0443\u0433\u0438\u043c. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043a\u0443\u043f\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 \u043e\u043d \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u043b \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443. <\/p>\n<p>  <b>Rocket CSS \u0438\u043c\u0435\u0435\u0442 8 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432:<\/b>  <\/p>\n<ul>\n<li>rocketPulse;<\/li>\n<li>rocketPulseHole;<\/li>\n<li>rocketRotate;<\/li>\n<li>rocketRotateHole;<\/li>\n<li>rocketRotateGo;<\/li>\n<li>rocketGost;<\/li>\n<li>rocketFlip;<\/li>\n<li>rocketCircle.<\/li>\n<\/ul>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/minimamente.com\/example\/rocket\/\">Rocket CSS<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">CSS3 Transitions with custom easing functions<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/www.joelambert.co.uk\/morf\/\">CSS3 Transitions with custom easing functions<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - CSS3 Transitions with custom easing functions\" src=\"https:\/\/habrastorage.org\/files\/896\/e5f\/636\/896e5f636d6b453ca0f23d14a6e4575f.jpg\"\/><\/p>\n<p>  \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 javascript \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0441 \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 hardware-acceleration.<\/p>\n<p>  <a href=\"http:\/\/scripty2.com\/hardware-acceleration\/\">\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b<\/a>.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/www.joelambert.co.uk\/morf\/\">CSS3 Transitions with custom easing functions<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Dynamics.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/dynamicsjs.com\/\">Dynamics.js<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Dynamics.js\" src=\"https:\/\/habrastorage.org\/files\/e4d\/052\/46d\/e4d05246d54e4b399bc8f2d16da4ad86.jpg\"\/><\/p>\n<p>  Javascript-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0439 \u0444\u0438\u0437\u0438\u043a\u043e\u0439. \u0415\u0451 \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/dynamicsjs.com\/\">Dynamics.js<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Animsition<\/b><\/p>\n<div class=\"spoiler_text\">\n<h6><b><a href=\"http:\/\/git.blivesta.com\/animsition\/\">Animsition<\/a><\/b><\/h6>\n<p>  <img decoding=\"async\" alt=\"\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Animsition\" src=\"https:\/\/habrastorage.org\/files\/2fd\/339\/d61\/2fd339d61b1349b39c71f178655895fc.jpg\"\/><\/p>\n<p>  jQuery \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u0441\u0430\u0439\u0442\u0430. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 data-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 \u0432\u044b\u0437\u043e\u0432\u044b \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 js.<\/p>\n<p>  <b>\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u043f\u043e 10 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f\u043c:<\/b>  <\/p>\n<ul>\n<li>Fade;<\/li>\n<li>Fade up;<\/li>\n<li>Fade down;<\/li>\n<li>Fade left;<\/li>\n<li>Fade right;<\/li>\n<li>Rotate;<\/li>\n<li>Flip X;<\/li>\n<li>Flip Y;<\/li>\n<li>Overlay;<\/li>\n<li>Zoom.<\/li>\n<\/ul>\n<p>  <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b:<\/b>  <\/p>\n<ul>\n<li>IE10+;<\/li>\n<li>Safari;<\/li>\n<li>Chrome;<\/li>\n<li>Firefox.<\/li>\n<\/ul>\n<p>  \u0418\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a.<\/p>\n<p>  <b>\u0421\u0430\u0439\u0442:<\/b> <a href=\"http:\/\/git.blivesta.com\/animsition\/\">Animsition<\/a>.  <\/div>\n<\/div>\n<p>  <\/p>\n<h4><b>\u0411\u0443\u0434\u0443\u0449\u0435\u0435 \u0432\u0435\u0431-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/b><\/h4>\n<p>  <img decoding=\"async\" alt=\"\u0411\u0443\u0434\u0443\u0449\u0435\u0435 \u0432\u0435\u0431-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 - Web Animations\" src=\"https:\/\/habrastorage.org\/files\/9db\/aab\/a3c\/9dbaaba3c5174e57b129a64ff491d004.jpg\"\/><\/p>\n<p>  \u041b\u0435\u0442\u0435\u043b\u0438 \u0433\u043e\u0434\u0430. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430\u043f\u043e\u043b\u043d\u044f\u043b\u0430\u0441\u044c \u043d\u043e\u0432\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438. \u0418 \u0432\u0440\u043e\u0434\u0435 \u0432\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e, \u043d\u043e \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442\u2026<\/p>\n<p>  \u0410 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0431\u0430\u043b\u0430\u043d\u0441\u0430 \u043c\u0435\u0436\u0434\u0443 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c(css) \u0438 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c(js) \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e &quot;<b>Web Animations<\/b>&quot; \u0443\u0434\u0430\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442.<\/p>\n<p>  <b>\u041e\u043d \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0438\u0445 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b:<\/b>  <\/p>\n<ul>\n<li>\u0420\u0430\u0431\u043e\u0442\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435 (\u043a\u0430\u043a \u0432 css);<\/li>\n<li>\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 (\u043a\u0430\u043a \u0432 js);<\/li>\n<li>\u0423\u0434\u043e\u0431\u043d\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (css);<\/li>\n<li>\u0421\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u044d\u043a\u0440\u0430\u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 (requestAnimationFrame \u0432 js).<\/li>\n<\/ul>\n<p>  \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043f\u043e\u043a\u0430 \u043e\u043d <b>\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445:<\/b>  <\/p>\n<ul>\n<li>Firefox 43+;<\/li>\n<li>Chrome 45+;<\/li>\n<li>Opera 35+;<\/li>\n<li>Android browser 47+;<\/li>\n<li>Chrome for android 49+.<\/li>\n<\/ul>\n<p>  <a href=\"https:\/\/github.com\/web-animations\/web-animations-js\">\u0414\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u043e\u043b\u0438\u0444\u0438\u043b (\u043e\u0442 IE10+)<\/a>.<\/p>\n<p>  <b>Web animations \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c:<\/b>  <\/p>\n<pre><code class=\"javascript\">element.animate([ \t{cssProperty: value0}, \t{cssProperty: value1}, \t{cssProperty: value2}, \t\/\/... ], { \tdirection: nameDirection, \/\/ \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, 'normal', 'reverse', \u0438 \u0442.\u0434. \titerations: iterationCount, \/\/ \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u0439 (\u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u0438\u043b\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e) \tdelay: delayValue, \/\/\u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 \tduration: timeInMs, \/\/ \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 \teasing: nameEaseFunction, \/\/'linear', \u043a\u0440\u0438\u0432\u0430\u044f \u0411\u0435\u0437\u044c\u0435, \u0438 \u0442.\u0434. \tfill:  nameFill \/\/'forwards', 'backwards', 'both', 'none', 'auto' }); <\/code><\/pre>\n<p>  \u0422\u0435, \u043a\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u0441\u0440\u0430\u0437\u0443 \u0443\u0432\u0438\u0434\u044f\u0442 \u0432 \u043d\u0435\u043c \u0437\u043d\u0430\u043a\u043e\u043c\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f (\u043a\u0430\u043a keyframe \u0432 css). \u041f\u043e\u0442\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043e\u043d \u0432\u0435\u0440\u043d\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 AnimationPlayer, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432.<\/p>\n<p>  <b>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 AnimationPlayer:<\/b>  <\/p>\n<ul>\n<li>currentTime \u2014 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 (\u043c\u043e\u0436\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0435\u0433\u043e \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c);<\/li>\n<li>playbackRate \u2014 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u043a\u043e\u0440\u044f\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437);<\/li>\n<li>playState \u2014 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (idle, pending, running, paused, finished);<\/li>\n<li>startTime \u2014 \u0432\u0440\u0435\u043c\u044f, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u043d\u0430\u0447\u0430\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f (\u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c).<\/li>\n<\/ul>\n<p>  <b>\u041c\u0435\u0442\u043e\u0434\u044b AnimationPlayer:<\/b>  <\/p>\n<ul>\n<li>finish \u2014 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0440\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0432\u043e\u044e);<\/li>\n<li>pause \u2014 \u0441\u0442\u0430\u0432\u0438\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u043f\u0430\u0443\u0437\u0443;<\/li>\n<li>play \u2014 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e;<\/li>\n<li>reverse \u2014 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435.<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 <b>GroupEffect<\/b> \u0438 <b>keyframeEffects<\/b> \u043c\u043e\u0436\u043d\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441\u0440\u0430\u0437\u0443 \u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. <b>SequenceEffect<\/b> \u0442\u043e\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 (\u043a\u0430\u043a GroupEffect), \u043d\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0435\u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u0412\u0441\u0435 \u044d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443. \u0412\u0435\u0434\u044c \u0440\u0430\u043d\u044c\u0448\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 css \u043d\u0430\u043c \u0431\u044b \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0448\u043b\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0443\u0441\u043f\u0435\u043b\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f (\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u0437 8 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u0412\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0432\u0441\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c).<\/p>\n<p>  9-\u0433\u043e \u0430\u043f\u0440\u0435\u043b\u044f 2015 \u0433\u043e\u0434\u0430 \u0432\u044b\u0448\u043b\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e \u0435\u0449\u0451 \u043e\u0434\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u0433\u0434\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 <b>css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e motion-path<\/b> (\u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0432 web-animations). \u0422\u043e\u0447\u043a\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0443\u0440\u044b SVG. <\/p>\n<p>  \u0412 <b>Web animations<\/b> \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043d\u0435 \u0443\u0442\u0432\u0435\u0440\u0434\u0438\u043b\u043e\u0441\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0439, \u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u0436\u0435 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b. \u041d\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u0438 \u0441\u043a\u043e\u0440\u043e \u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. <\/p>\n<p>  <b>\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043f\u043e Web Animations:<\/b>  <\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Animation\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f web-animations \u0432 Mozilla<\/a>;<\/li>\n<li><a href=\"http:\/\/caniuse.com\/#feat=web-animation\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 web-animations \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438<\/a>;<\/li>\n<li><a href=\"http:\/\/frontender.info\/the-state-of-animation-2014\/\">\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 2014 \u0433\u043e\u0434\u0430<\/a>;<\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/motion-1\/\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432<\/a>;<\/li>\n<li><a href=\"http:\/\/web-animations.github.io\/web-animations-demos\/\">\u041f\u043e\u043b\u0438\u0444\u0438\u043b web-animations<\/a>;<\/li>\n<li><a href=\"http:\/\/css-live.ru\/tag\/web-animations-api\">\u0421\u0435\u0440\u0438\u044f \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u0440\u043e web-animations<\/a>;<\/li>\n<li><a href=\"https:\/\/w3c.github.io\/web-animations\/\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f web-animations<\/a>;<\/li>\n<li><a href=\"https:\/\/habrahabr.ru\/post\/226169\/\">\u041f\u0440\u043e web-animations \u043d\u0430 \u0445\u0430\u0431\u0440\u0435<\/a>;<\/li>\n<li><a href=\"http:\/\/mrsamo.github.io\/web-animations\/\">\u041f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u0440\u043e css \u0438 js \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e<\/a>;<\/li>\n<li><a href=\"http:\/\/css-live.ru\/articles\/web-animations-api-poleznye-ssylki.html\">\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043f\u0440\u043e web-animations<\/a>;<\/li>\n<\/ul>\n<p>  <\/p>\n<h4><b>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/b><\/h4>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u044f \u043d\u0430\u0447\u0438\u043d\u0430\u043b \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u0442\u043e \u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044e\u0441\u044c \u0437\u0430 \u043f\u0430\u0440\u0443 \u0434\u043d\u0435\u0439, \u043d\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e \u043d\u0435\u0439 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e\u2026 \u041f\u043e\u044d\u0442\u043e\u043c\u0443 <b>\u0432 Word&#8217;\u0435 \u0431\u0435\u0437 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c 30 \u0441\u0442\u0440\u0430\u043d\u0438\u0446<\/b>. \u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0435\u0451 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u0442\u0430\u0442\u044c\u044f\u043c \u044f \u043d\u0435 \u0441\u0442\u0430\u043b, \u0442\u0430\u043a \u043a\u0430\u043a \u0446\u0435\u043b\u043e\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0430. \u0414\u0430 \u0438 \u0443\u0434\u043e\u0431\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435. <\/p>\n<p>  \u0412\u0441\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a \u0412\u044b \u0435\u0449\u0451 \u043b\u0443\u0447\u0448\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u0442\u0435\u0441\u044c \u0432 css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0412\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f.<\/p>\n<p>  \u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043e\u0431\u043b\u0430\u0447\u043d\u043e\u0439 IDE mr. Gefest, <b>\u043c\u044b \u0432\u0435\u0434\u0435\u043c \u0433\u0440\u0443\u043f\u043f\u0443 \u043f\u0440\u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432 \u0432\u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0435<\/b>. \u041a\u0430\u0436\u0434\u0443\u044e \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043c\u044b \u0436\u0435\u0441\u0442\u043a\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\/\u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0431\u044b\u043b \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u0412\u0430\u0441 \u0441 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 <a href=\"https:\/\/vk.com\/mrgefest\"><b>\u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u044e \u0412\u0430\u0441 \u043a \u043d\u0430\u043c<\/b><\/a>. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a\u043e\u0432, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 (\u043c\u044b \u0442\u0440\u0430\u0442\u0438\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u043f\u043e\u0438\u0441\u043a \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044e \u043d\u043e\u0432\u044b\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043c \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432).<\/p>\n<p>  \u041e\u043f\u0435\u0447\u0430\u0442\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435 \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0439\u0442\u0435 \u0432 \u043b\u0438\u0447\u043a\u0443.<\/p>\n<h5><b>\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b, \u043d\u0435 \u0432\u043e\u0448\u0435\u0434\u0448\u0438\u0435 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u044b \u0441\u0442\u0430\u0442\u044c\u0438<\/b><\/h5>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/fliptheweb\/motion-ui-design\">\u0421\u0441\u044b\u043b\u043a\u0438 \u043f\u0440\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e<\/a>;<\/li>\n<li><a href=\"https:\/\/www.stanleycyang.com\/tutorials\/css-animations-in-15-minutes\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0430 15 \u043c\u0438\u043d\u0443\u0442<\/a>;<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ui\/animations\/animations-and-performance\">\u041f\u0440\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0442 Google<\/a>;<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/rendering\/avoid-large-complex-layouts-and-layout-thrashing?hl=ru\">\u041f\u0440\u043e \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0432 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u0430\u0445 \u043e\u0442 Google<\/a>;<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/controlling-css-animations-transitions-javascript\/\">\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 javascript<\/a>;<\/li>\n<li><a href=\"http:\/\/www.sitepoint.com\/css3-animation-javascript-event-handlers\/\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 javascript<\/a>;<\/li>\n<li><a href=\"http:\/\/css-live.ru\/articles\/proizvoditelnost-css-animacij-nerasskazannaya-istoriya-s-kommentariyami-pola-ajrisha.html\">\u041f\u0440\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c<\/a>;<\/li>\n<li><a href=\"http:\/\/easings.net\/ru\">\u0421\u043f\u0438\u0441\u043e\u043a easing functions<\/a>.<\/li>\n<\/ul>\n<div class=\"clear\"><\/div>\n<p> \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:\/\/habrahabr.ru\/post\/280370\/\"> https:\/\/habrahabr.ru\/post\/280370\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       <img decoding=\"async\" alt=\"\u0421\u043e\u0432\u0435\u0442\u044b, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043f\u043e CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438\" src=\"https:\/\/habrastorage.org\/files\/b1b\/9ec\/4c4\/b1b9ec4c4ced41d28cec13b156b33a80.jpg\"\/><\/p>\n<h4><b>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/b><\/h4>\n<p>  \u0411\u044b\u043b\u0430 \u0433\u043b\u0443\u0431\u043e\u043a\u0430\u044f \u043d\u043e\u0447\u044c. \u0412 \u0442\u0435\u043c\u043d\u0443\u044e \u043a\u043e\u043c\u043d\u0430\u0442\u0443 \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u0440\u0435\u0432\u044f\u043d\u043d\u044b\u0435 \u043e\u043a\u043d\u0430 \u043f\u0440\u043e\u043d\u0438\u043a\u0430\u043b \u043b\u0443\u043d\u043d\u044b\u0439 \u0441\u0432\u0435\u0442. \u041e\u043d \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0441\u0432\u0435\u0449\u0430\u043b \u043c\u043e\u0439 \u0434\u0435\u0440\u0435\u0432\u044f\u043d\u043d\u044b\u0439 \u0441\u0442\u043e\u043b \u0441 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u043e\u043c, \u0431\u043b\u043e\u043a\u043d\u043e\u0442\u043e\u043c \u0438 \u0441\u0438\u043d\u0435\u0439 \u0440\u0443\u0447\u043a\u043e\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u0440\u043e\u0442\u044f\u043d\u0443\u043b \u0441\u0432\u043e\u044e \u0440\u0443\u043a\u0443 \u043a \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u043e\u0439 \u043b\u0430\u043c\u043f\u0435 \u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u043b \u0435\u0451.<\/p>\n<p>  \u041d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0431\u044b\u043b \u043e\u0442\u043a\u0440\u044b\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043f\u0440\u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443. \u041e\u043d \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u043e\u043f\u043e\u043b\u043d\u044f\u043b\u0441\u044f \u043d\u043e\u0432\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. <\/p>\n<p>  \u0421\u0432\u0435\u0440\u043d\u0443\u0432 \u0435\u0433\u043e, <s>\u044f \u043f\u043e\u0448\u0435\u043b \u043d\u0430 \u0443\u043b\u0438\u0446\u0443 \u0432 \u043f\u043e\u0438\u0441\u043a\u0430\u0445 \u043a\u0438\u043d\u043e\u0442\u0435\u0430\u0442\u0440\u0430 \u0441 Deadpool&#8217;\u043e\u043c<\/s> \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u0441\u0442\u0430\u043b \u0431\u043b\u0443\u0436\u0434\u0430\u0442\u044c \u043f\u043e \u043e\u043a\u0440\u0435\u0441\u0442\u043d\u043e\u0441\u0442\u044f\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0433\u0443\u043b\u043a\u0438 \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e js-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e css-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u2026 \u041a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u043f\u043e \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u0435 \u0443 \u043c\u0435\u043d\u044f \u0443\u0436\u0435 \u043d\u0430\u0431\u0440\u0430\u043b\u043e\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0435 40 \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.   <\/p>\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-277173","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/277173","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=277173"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/277173\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=277173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=277173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=277173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}