{"id":159315,"date":"2012-12-10T16:03:04","date_gmt":"2012-12-10T12:03:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=159315"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=159315","title":{"rendered":"<span class=\"post_title\">\u0417\u0430 \u043a\u0430\u0434\u0440\u043e\u043c \u2014 Media Query Mario<\/span>"},"content":{"rendered":"<div class=\"content html_format\">       <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/1fa\/a28\/1a5\/1faa281a5940bdaf0ac0a95f1c11af38.jpg\"\/><br \/>  <i>\u0412 \u044d\u0442\u043e\u043c \u0445\u0430\u0431\u0440\u0430\u0442\u043e\u043f\u0438\u043a\u0435 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0434\u0435\u043c\u043a\u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/demos\/detail\/media-query-mario\">Media Query Mario<\/a>, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432 <a href=\"http:\/\/habrahabr.ru\/company\/zfort\/blog\/158093\/\">\u0434\u0430\u0439\u0434\u0436\u0435\u0441\u0442\u0435 Zfort #30<\/a>. <\/i><\/p>\n<p>  \u042f \u043e\u0431\u043e\u0436\u0430\u044e \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u043e\u0432\u043e\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u043c\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u043c\u043e\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0422\u043e, \u0447\u0442\u043e \u043b\u044e\u0434\u0438 \u043f\u043e\u0440\u043e\u0439 \u0432 \u043d\u0438\u0445 \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u044e\u0442, \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u043e\u0440\u0432\u0430\u0442\u044c \u043c\u043e\u0437\u0433 \u0441\u0432\u043e\u0435\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u044f <a href=\"http:\/\/2012.webdevconf.com\/\">WebDevConf 2012<\/a> \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u043e\u043a\u0442\u044f\u0431\u0440\u044f, \u044f \u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0442\u043e \u0441\u0430\u043c\u043e\u0435, \u0432\u043e\u0437\u0432\u044b\u0448\u0435\u043d\u043d\u043e\u0435 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u043f\u043e\u0434\u043d\u043e\u0441\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u0441 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 \u0432 \u041b\u043e\u043d\u0434\u043e\u043d, \u044f \u0437\u0430\u043c\u0435\u0442\u0438\u043b <a href=\"https:\/\/twitter.com\/mozhacks\/status\/258669800786640896\">\u0442\u0432\u0438\u0442<\/a> \u043e Mozilla Dev Derby, \u0438, \u0432\u0441\u0435 \u0435\u0449\u0435 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439, \u0440\u0435\u0448\u0438\u043b \u0432\u043d\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0441\u0442\u0430\u043b\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u043c\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/demos\/detail\/media-query-mario\">Media Query Mario<\/a>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u043c\u0435\u0441\u044c \u0438\u0437 \u043c\u0435\u0434\u0438\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, CSS3 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 <a href=\"https:\/\/developer.mozilla.org\/en\/html\/html5\">HTML5<\/a> audio.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h4>\u0421 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c?<\/h4>\n<p>  \u0418\u0434\u0435\u044e \u044f \u043d\u0430\u0447\u0430\u043b \u043e\u0431\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0443\u044f\u0441\u044c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e. \u041c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0432\u043f\u043e\u043b\u043d\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u0443\u0433\u043b\u0443\u0431\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432 CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0441\u043c\u0435\u0448\u0430\u0442\u044c \u0438\u0445 \u0441 \u043c\u0435\u0434\u0438\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u2014 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0442\u0435\u043c\u043e\u0439 \u044d\u0442\u043e\u0433\u043e Dev Derby. \u041e\u0442\u0434\u0430\u0442\u044c CSS \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0432\u043c\u0435\u0441\u0442\u043e JavaScript \u2014 \u0437\u0432\u0443\u0447\u0438\u0442 \u043d\u0435\u043f\u043b\u043e\u0445\u043e.<\/p>\n<p>  \u041c\u0430\u0440\u0438\u043e 3 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u043c, \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e \u0432 \u0433\u043e\u043b\u043e\u0432\u0443. \u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439 <a href=\"http:\/\/en.wikipedia.org\/wiki\/Side-scrolling_video_game\">\u0441\u0430\u0439\u0434\u0441\u043a\u0440\u043e\u043b\u043b\u0435\u0440<\/a>, \u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u044f \u043f\u043e\u043c\u0435\u0448\u0430\u043d \u043d\u0430 \u0440\u0435\u0442\u0440\u043e \u0438\u0433\u0440\u0430\u0445, \u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0434\u0443\u043c\u0430\u043b \u043e \u041c\u0430\u0440\u0438\u043e. \u041a\u0430\u0436\u0434\u044b\u0439, \u043a\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442\u0441\u044f \u0438\u0433\u0440\u0430\u043c\u0438 \u043f\u0440\u043e \u041c\u0430\u0440\u0438\u043e, \u043f\u043e\u0439\u043c\u0435\u0442, \u0447\u0442\u043e \u041c\u0430\u0440\u0438\u043e 3 \u0431\u044b\u043b \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u043e\u043c \u043d\u0430 \u0440\u043e\u043b\u044c (\u0435\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u043d\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u0435\u043d, \u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0439\u0434\u0443\u0442\u0441\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e <b>\u043b\u0443\u0447\u0448\u0438\u0439<\/b> \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u044b\u0439 \u041c\u0430\u0440\u0438\u043e). <\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0434\u0435\u043c\u043a\u0438, \u043c\u0435\u043d\u044f \u0441\u043f\u0440\u043e\u0441\u0438\u043b\u0438, \u0437\u0430\u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u043b\u0443\u0447\u0448\u0435? \u0413\u043b\u0430\u0432\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043d\u0430 \u0447\u0442\u043e \u043e\u043d\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0434\u0435\u043c\u043e\u043a, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u043a\u0440\u0443\u0442\u043e\u0441\u0442\u044c canvas \u0438 SVG, \u043d\u043e \u043c\u043e\u044f \u043e\u0442\u043d\u044e\u0434\u044c \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u043f\u0430\u0433\u0430\u043d\u0434\u044b CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u042f \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0445\u043e\u0442\u0435\u043b \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440, \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043d\u0438\u0445 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u042f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043b \u0441\u0435\u0431\u044f \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u043e\u043c \u043f\u0440\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0435\u0437\u0434\u0435, \u0433\u0434\u0435 \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u0415\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0431\u044b\u043b\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS, \u0442\u043e \u044f \u0434\u043e\u043b\u0436\u043a\u0435 \u0431\u044b\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e, \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a\u043e\u0439 \u044f \u043e\u0436\u0438\u0434\u0430\u043b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u044f \u0432\u0435\u0440\u043d\u0443\u0441\u044c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<h4>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043b\u044e\u0431\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443<\/h4>\n<p>  \u041e\u0434\u043d\u0430 \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f, \u0441\u043e\u0441\u0442\u043e\u044f\u043b\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u0440\u0438 \u043a\u0430\u043a\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u0432\u0430\u0436\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0432\u0430\u0436\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043a\u0443\u0441\u043e\u043a \u0443\u0440\u043e\u0432\u043d\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0435\u0434\u0438\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u043a\u0443\u0441\u043e\u043a \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0443\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0430 \u0440\u0430\u0437.<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/e4c\/b83\/b0d\/e4cb83b0dcce4b59e140a3f54c8b445d.jpg\"\/><\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u0435\u043d\u0438\u0439 \u043d\u0430\u0434 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u0438\u0437 \u0441\u0435\u0431\u044f \u0441\u0430\u043c Mario 3, \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u043c\u0435\u043d\u044e. \u041f\u043e\u043c\u0438\u043c\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u0435\u043c\u043a\u0438, \u043e\u043d \u0435\u0449\u0435 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043c\u0435\u043d\u044f\u043b \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u043a\u043d\u0430, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u042f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0438\u0440\u043e\u0432\u0430\u043b \u044d\u0442\u043e \u043c\u0435\u0434\u0438\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u0441 \u0443\u0441\u043b\u043e\u0432\u0438\u0435\u043c, \u043f\u0440\u044f\u0447\u0443\u0449\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0430\u0447\u0430\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"css\">@media screen and (max-width: 320px), (min-width: 440px) {     .startBtn {         display:none;     } }<\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0430\u043c\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0433\u0435\u0439\u043c\u043f\u043b\u0435\u044e. \u0427\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435, \u044f \u043d\u0430\u0448\u0435\u043b <a href=\"http:\/\/www.youtube.com\/watch?v=2SfvhZgD7Bk\">\u0432\u0438\u0434\u0435\u043e\u0440\u043e\u043b\u0438\u043a<\/a> \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0443\u0440\u043e\u0432\u043d\u044f \u0432 \u0442\u0435\u043c\u043f\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043c\u043e\u0433 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c. \u0420\u043e\u043b\u0438\u043a \u043f\u043e\u043c\u043e\u0433 \u043c\u043d\u0435 \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0438 \u043f\u043e\u0440\u0430\u0437\u043c\u044b\u0441\u043b\u0438\u0442\u044c \u043d\u0430\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u044f \u0431\u0443\u0434\u0443 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0432\u0440\u0430\u0433\u043e\u0432 \u0438 \u043f\u0430\u0443\u044d\u0440-\u0430\u043f\u044b.<\/p>\n<p>  \u0417\u0430\u043a\u043e\u043d\u0447\u0438\u0432 \u0441 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u043c\u043d\u0435 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043b\u0438\u0448\u044c \u0434\u043e\u0431\u044b\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b. \u041a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c, \u043d\u0430\u0439\u0442\u0438 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0438 \u0437\u0432\u0443\u043a\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u0438\u0433\u0440\u044b \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e. \u041d\u0430 <a href=\"http:\/\/www.nesmaps.com\/\">NESMaps<\/a> \u0438 <a href=\"http:\/\/www.mariomayhem.com\/\">Mario Mayhem<\/a> \u044f \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u043b \u043a\u0430\u0440\u0442\u044b \u0443\u0440\u043e\u0432\u043d\u044f \u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0430 \u043d\u0430 <a href=\"http:\/\/www.themushroomkingdom.net\/\">The Mushroom Kingdom<\/a> \u044f \u043d\u0430\u0448\u0435\u043b \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0437\u0432\u0443\u043a\u0438. \u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u043e \u043e\u043d\u0438 \u0432\u0441\u0435\u0440\u0430\u0432\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u0438 \u043c\u043d\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>  \u0412\u043e\u0442 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/b82\/ea8\/033\/b82ea80331f99404f5898f9b189fccce.png\"\/><\/p>\n<h4>\u041f\u043e\u0435\u0445\u0430\u043b\u0438!<\/h4>\n<p>  \u0418\u0442\u0430\u043a, \u043a \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u044f \u0438\u043c\u0435\u043b \u043d\u0430 \u0440\u0443\u043a\u0430\u0445 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u043d\u043d\u0443\u044e \u0438\u0434\u0435\u044e \u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0438 \u0443\u0436\u0435 \u0431\u044b\u043b \u0433\u043e\u0442\u043e\u0432 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u0432 \u043a\u043e\u0434\u0435.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u044f \u0438\u0437\u0443\u0447\u0438\u043b \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0443\u044e CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044f \u0432\u044b\u0440\u0443\u0447\u0438\u043b\u0438. MDN (<a href=\"https:\/\/developer.mozilla.org\/ru\/\">Mozilla Developer Network<\/a>) \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430, \u0447\u0442\u043e \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/Using_CSS_animations\">\u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435<\/a> \u043d\u0435 \u0441\u0442\u0430\u043b\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c. \u042f \u0431\u044b \u0435\u0449\u0435 \u043f\u043e\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u0412\u0430\u043c \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u0438\u0437 \u044d\u0442\u0438\u0445 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u044b\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 <a href=\"http:\/\/www.ubelly.com\/2012\/01\/the-five-minute-guide-to-css-animations\/\">\u041f\u0438\u0442\u0435\u0440\u0430<\/a>, <a href=\"http:\/\/dev.opera.com\/articles\/view\/css3-animations\/\">\u041a\u0440\u0438\u0441\u0430<\/a> \u0438\u043b\u0438 <a href=\"http:\/\/blogs.msdn.com\/b\/davrous\/archive\/2011\/12\/06\/introduction-to-css3-animations.aspx\">\u0414\u044d\u0432\u0438\u0434\u0430<\/a> \u2014 \u0432\u0441\u0435 \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0432 \u0442\u0435\u043c\u0443.<\/p>\n<p>  \u042f \u043d\u0435 \u0441\u0442\u0430\u043d\u0443 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u044d\u0442\u0438\u0445 \u0441\u0442\u0430\u0442\u0435\u0439, \u043d\u043e \u043e\u0442\u043c\u0435\u0447\u0443 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0441\u0430\u043c. \u0414\u043b\u044f \u043a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u0438, \u044f \u043e\u043f\u0443\u0449\u0443 \u0432\u0441\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b, \u043d\u043e \u0435\u0441\u043b\u0438 \u0412\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u0430\u043c\u0438, \u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043e \u043d\u0438\u0445 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c, \u043e\u043d\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<p>  \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u0442\u043e\u0438\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c: \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0448\u044c\u0441\u044f \u043d\u043e\u0432\u044b\u043c\u0438 \u0444\u0438\u0447\u0430\u043c\u0438 CSS3, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430, \u0432\u0440\u043e\u0434\u0435 LESS \u0438\u043b\u0438 SASS, \u043c\u043e\u0436\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c, \u0438 \u044f \u0431\u044b \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u0412\u0430\u043c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u043d\u0443. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 \u043f\u0440\u044f\u0447\u0435\u0442 \u0432\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0438 \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0445 \u0438\u0437 \u043a\u043e\u0434\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0412\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0431\u0435\u0441\u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0432 \u043a\u043e\u0434\u0435 \u0438 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u043a\u0443\u0447\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u0440\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u043c\u0435\u043d\u0435 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432.<\/p>\n<p>  \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u0438\u043a, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439: <b>\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/b> (animation properties) \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0435\u0439 <b>\u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043a\u0430\u0434\u0440\u044b<\/b> (keyframes).<\/p>\n<h4>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/h4>\n<p>  \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0412\u043e\u0442 \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044f:  <\/p>\n<pre><code class=\"css\">\/\/\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0438\u043c\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u043d\u0430\u0431\u043e\u0440\u0443 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u0430\u0434\u0440\u043e\u0432 animation-name: mario-jump;   \/\/\u0432\u0440\u0435\u043c\u044f, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043d\u0430, \u0432 \u043c\u0438\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 \u0438\u043b\u0438 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 animation-duration: 500ms;   \/\/\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 animation-timing-function: ease-in-out;   \/\/\u043a\u0430\u043a \u0434\u043e\u043b\u0433\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430, \u043c\u0438\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0438\u043b\u0438 \u0441\u0435\u043a\u0443\u043d\u0434\u044b animation-delay: 0s;   \/\/\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0438\u0433\u0440\u0430\u043d\u0430 animation-iteration-count: 1;   \/\/\u0434\u043e\u043b\u0436\u043d\u0430 \u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043a \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0438 \u043a\u043e\u0433\u0434\u0430 animation-fill-mode: forwards; <\/code><\/pre>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u0434\u0435\u043c\u043a\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>animation-fill-mode<\/code> \u0431\u044b\u043b\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u044b\u043c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f. \u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f \u043a \u0442\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u0434\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0435\u0441\u043b\u0438 <code>animation-fill-mode<\/code> \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043b\u0435\u0432\u0443\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043d\u0430 30px \u0441 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0432 0px, \u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u043d \u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u044e 0px. \u0410 \u0435\u0441\u043b\u0438 fill-mode \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>forwards<\/code>, \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0432 \u0441\u0432\u043e\u0435\u0439 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438.<\/p>\n<h4>\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043a\u0430\u0434\u0440\u044b<\/h4>\n<p>  \u041f\u0440\u0430\u0432\u0438\u043b\u043e <code>@keyframes<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0412\u0430\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0448\u0430\u0433\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u0441\u0432\u043e\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435, \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043a\u0430\u043a:  <\/p>\n<pre><code class=\"css\">@keyframes mario-move {     from { left:0px;   }     to   { left:200px; } } <\/code><\/pre>\n<p>  \u0413\u0434\u0435 <code>from<\/code> \u0438 <code>to<\/code> \u044d\u0442\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u0434\u043b\u044f <code>0%<\/code> \u0438 <code>100%<\/code> \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u044b\u0436\u043e\u043a \u041c\u0430\u0440\u0438\u043e \u043c\u0435\u0436\u0434\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c\u0438:  <\/p>\n<pre><code class=\"css\">@keyframes mario-jump-sequence {     0% { bottom:30px; left: 445px; }     20% { bottom:171px; left: 520px; }     30% { bottom:138px; left: 544px; }     32% { bottom:138px; left: 544px; }     47% { bottom:228px; left: 550px; }     62% { bottom:138px; left: 550px; }     64% { bottom:138px; left: 550px; }     76% { bottom:233px; left: 580px; }     80% { bottom:253px; left: 590px; }     84% { bottom:273px; left: 585px; }     90% { bottom:293px; left: 570px; }     100% { bottom:293px; left: 570px; } } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0430\u044f \u0432\u044b\u0448\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043b\u0438\u0442\u0441\u044f 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u0442\u043e \u041c\u0430\u0440\u0438\u043e \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u043d\u0435\u0442\u0441\u044f \u0438\u0437 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 <code>bottom: 30px; left: 445px;<\/code> \u0432 0 \u0441\u0435\u043a\u0443\u043d\u0434 (0% \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438) \u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u044e <code>bottom: 138px; left: 520px;<\/code> \u0437\u0430 \u043f\u0435\u0440\u0432\u044b\u0445 200 \u043c\u0441 (\u0438\u043b\u0438 20%). \u0418 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435, \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430 \u0434\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e.<\/p>\n<h4>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f<\/h4>\n<p>  \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u0434\u0435\u043c\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043d\u0430 \u0442\u0440\u0438 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u0442\u0438\u043f\u0443:  <\/p>\n<ul>\n<li><b>\u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f<\/b>, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u043f\u0440\u044b\u0436\u043a\u0438 \u041c\u0430\u0440\u0438\u043e \u0438\u043b\u0438 \u043c\u043e\u043d\u0435\u0442\u043a\u0430, \u0432\u044b\u0441\u043a\u0430\u043a\u0438\u0432\u0430\u044e\u0449\u0430\u044f \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0441 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c.<\/li>\n<li><b>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438<\/b>, \u0442.\u0435. \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0444\u043e\u043d\u043e\u0432\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/li>\n<li><b>\u0417\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u0435<\/b> \u043b\u044e\u0431\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u0438\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434 \u0438\u043b\u0438 \u0441\u0435\u043a\u0443\u043d\u0434.<\/li>\n<\/ul>\n<h4>\u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 75% \u0432\u0441\u0435\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u0435\u043c\u043a\u0438. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430 (\u0431\u0435\u0433 \u0438\u043b\u0438 \u043f\u0440\u044b\u0436\u043a\u0438), \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u0443\u044d\u0440-\u0430\u043f\u043e\u0432 \u0438 \u0443\u0434\u0430\u0440\u044b \u043f\u043e \u043a\u043e\u0440\u043e\u0431\u043a\u0435 \u0441 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c. \u0420\u0430\u0437\u043b\u0438\u0447\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 <code>animation-timing-function<\/code>, <code>animation-duration<\/code> \u0438 <code>animation-delay<\/code>.<\/p>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>animation-timing-function<\/code> \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0439 \u0435\u0451 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0412\u0435\u0437\u0434\u0435, \u0433\u0434\u0435 \u0431\u044b\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441\u043c\u044f\u0433\u0447\u0435\u043d\u0438\u044f (easing), \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>ease-in<\/code> or <code>ease-in-out<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u043d\u0430\u0447\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0448\u0430\u0433 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e. \u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u043b\u043e \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430, \u044f \u0434\u0435\u043b\u0430\u043b <code>animation-timing-function<\/code> \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0439 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043a\u0430\u0434\u0440\u044b, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0442\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u043c\u043d\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c.<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/f79\/6b9\/6ed\/f796b96ed536cebea506fa73b76e7694.jpg\"\/><\/p>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c <a href=\"http:\/\/codepen.io\/dragongraphics\/pen\/LnbkI\">\u0442\u0443\u0442<\/a>.<\/p>\n<h4>\u0421\u043f\u0440\u0430\u0439\u0442\u044b<\/h4>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>background-position<\/code> \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>step-end<\/code>:<\/p>\n<pre><code class=\"css\">.mario {     animation-timing-function: step-end;     ... } <\/code><\/pre>\n<p>  \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u044f \u043f\u043e\u043b\u0430\u0433\u0430\u043b, \u0447\u0442\u043e \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JavaScript \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0438 \u0443\u0434\u0430\u043b\u044f\u044f \u043a\u043b\u0430\u0441\u0441\u044b \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043f\u043e\u0441\u043b\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u043c\u0438 <code>step-end<\/code>, \u044f \u043d\u0430\u0448\u0435\u043b \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0443\u044e <a href=\"http:\/\/codepen.io\/dragongraphics\/pen\/kgerl\">\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u041c\u0430\u0440\u0438\u043e<\/a> \u0438 <a href=\"http:\/\/codepen.io\/dragongraphics\/pen\/sftrF\">\u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u041c\u0430\u0440\u0438\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u044a\u0435\u0434\u0430\u043d\u0438\u044f \u0433\u0440\u0438\u0431\u043e\u0447\u043a\u0430<\/a>.<\/p>\n<p>  \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>step-end<\/code> \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0431\u0435\u0437\u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e. \u041a \u0441\u0432\u043e\u0435\u043c\u0443 \u0443\u0434\u0438\u0432\u043b\u0435\u043d\u0438\u044e, \u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b \u0433\u043b\u044e\u043a \u0432 webkit, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0434\u0438\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043d\u0430\u0447\u0435, \u0447\u0435\u043c \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c. \u0417\u0430\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u2014 \u044d\u0442\u043e \u043f\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0434\u043b\u044f \u0434\u0432\u0438\u0436\u043a\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043d\u043e \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u0430\u0433\u043e\u043c <a href=\"http:\/\/code.google.com\/p\/chromium\/issues\/detail?id=159223&amp;can=4&amp;colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary\">Chromium<\/a>, \u0438 \u044f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0435\u0433\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u044f\u0442.<\/p>\n<h4>\u0417\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u0435<\/h4>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043a\u043e\u0433\u0434\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 <code>animation-iteration-count<\/code>:<\/p>\n<pre><code class=\"css\">\/\/\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f 5 \u0440\u0430\u0437 animation-iteration-count: 5;   \/\/\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e animation-iteration-count: infinite; <\/code><\/pre>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u044d\u0442\u043e\u0433\u043e \u0438\u0437 \u0434\u0435\u043c\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0441\u043b\u0443\u0436\u0438\u0442\u044c <a href=\"http:\/\/codepen.io\/dragongraphics\/pen\/FJAhb\">\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043e\u0433\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0448\u0430\u0440\u0430<\/a>.<\/p>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0438\u0437 \u0442\u0440\u0435\u0445 \u0442\u0438\u043f\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0431\u044b\u043b\u0430 \u0441\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432\u0441\u044f \u0434\u0435\u043c\u043a\u0430. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u044d\u0442\u0430\u043f\u043e\u043c \u0441\u0442\u0430\u043b\u0430 \u043e\u0437\u0432\u0443\u0447\u043a\u0430.<\/p>\n<h4>\u041e\u0437\u0432\u0443\u0447\u043a\u0430<\/h4>\n<p>  \u0425\u043e\u0442\u044f \u0440\u0430\u043d\u0435\u0435 \u044f \u0441\u043a\u0430\u0447\u0430\u043b \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u043c\u043d\u0435 \u0437\u0432\u0443\u043a\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <code>.wav<\/code>, \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0434\u043b\u044f <a href=\"https:\/\/developer.mozilla.org\/En\/HTML\/Element\/Audio\">HTML5 audio<\/a> \u2014 <code>.ogg <\/code>\u0438 <code>.mp3<\/code>. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"http:\/\/www.nch.com.au\/switch\/index.html\">Switch Audio Convertor<\/a> (\u043d\u0430 Mac) \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u043d\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u043e\u0444\u0442.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432, \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0432 \u043a\u0430\u043a\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a JS:<\/p>\n<pre><code class=\"javascript\">var audio = new Audio(); \/\/\u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0430\u0443\u0434\u0438\u043e \u043e\u0431\u044a\u0435\u043a\u0442 var canPlayOgg = !!audio.canPlayType && audio.canPlayType('audio\/ogg; codecs=&quot;vorbis&quot;') !== &quot;&quot;; var canPlayMP3 = !!audio.canPlayType && audio.canPlayType('audio\/mp3') !== &quot;&quot;; <\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u043b\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u0437\u0432\u0443\u043a\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0430 \u043a \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0444\u0430\u0439\u043b\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0437\u0432\u0443\u043a\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0438\u0445 function createAudio (audioFile, loopSet) {     var tempAudio = new Audio();     var audioExt;       \/\/\u0440\u0435\u0448\u0430\u0435\u043c, \u0432 \u043a\u0430\u043a\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c     if (canPlayMP3) {         audioExt = '.mp3';     } else if (canPlayOgg) {         audioExt = '.ogg';     }       tempAudio.setAttribute('src', audioFile + audioExt); \/\/set the source file     tempAudio.preload = 'auto'; \/\/\u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u0444\u0430\u0439\u043b       \/\/\u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0431\u0443\u0434\u0435\u0442 \u043b\u0438 \u0437\u0432\u0443\u043a \u0437\u0430\u0446\u0438\u043a\u043b\u0435\u043d (\u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u0442\u044c \u0444\u043e\u043d\u043e\u0432\u0443\u044e \u043c\u0443\u0437\u044b\u043a\u0443)     tempAudio.loop = (loopSet === true ? true : false);       return tempAudio; } var audioMarioJump = createAudio(&quot;soundboard\/smb3_jump&quot;); \/\/\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b\u0437\u043e\u0432\u0430 <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c \u0437\u0432\u0443\u043a\u0438 \u0432 \u043d\u0443\u0436\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439. \u0427\u0442\u043e\u0431\u044b \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>animationstart<\/code> \u0438 <code>animationend<\/code> (\u0438\u043b\u0438 \u0432 WebKit, <code>webkitAnimationStart<\/code> \u0438 <code>webkitAnimationEnd<\/code>), \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0441\u044f JS. \u0422\u0430\u043a \u044f \u043d\u0430\u0443\u0447\u0438\u043b\u0441\u044f \u043b\u043e\u0432\u0438\u0442\u044c \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0447\u0430\u043b\u0430 \u0438 \u043a\u043e\u043d\u0446\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0438 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0434\u043b\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0437\u0432\u0443\u043a.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 <code>animationName<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440.<\/p>\n<pre><code class=\"javascript\">mario.addEventListener('animationstart', marioEventListener);   function marioEventListener(e) {     if (e.animationName === 'mario-jump') {         audioMarioJump.play();     } } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0443 \u0412\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0439 <code>animationstart<\/code> \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u041c\u0430\u0440\u0438\u043e \u0432 \u0434\u0435\u043c\u043a\u0435), \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c <code>animationName<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 <code>switch<\/code>.<\/p>\n<p>  \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440, \u043a\u0430\u043a \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u044d\u0442\u043e \u0434\u0435\u043c\u043e, \u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>Keyframe Event JS shim<\/code> \u043e\u0442 <code>Joe Lambert<\/code> \u043c\u043e\u0436\u043d\u043e \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u043a\u0430\u0434\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0447\u0442\u043e \u0434\u0430\u0435\u0442 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f.<\/p>\n<h4>\u041a\u043e\u043d\u0435\u0446 \u0438\u0433\u0440\u044b<\/h4>\n<p>  \u042f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0437\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u043e\u0442\u0437\u044b\u0432\u044b \u043e\u0431 \u044d\u0442\u043e\u0439 \u0434\u0435\u043c\u043a\u0435, \u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u043a\u043e\u0433\u0434\u0430-\u043b\u0438\u0431\u043e \u043c\u043e\u0433 \u0431\u044b \u0441\u0435\u0431\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c. \u041a\u0430\u043a \u0438 \u0432 \u043b\u044e\u0431\u043e\u043c \u0434\u0440\u0443\u0433\u043e\u043c \u0445\u0430\u043a\u0435 (<i>\u043f\u043e\u0441\u0442 \u0432\u0437\u044f\u0442 \u0441 hacks.mozilla.org, \u043f\u0440\u0438\u043c. \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/i>), \u0437\u0434\u0435\u0441\u044c \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u043d\u0430\u0434 \u0447\u0435\u043c \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u043e \u044f \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u0432\u0430\u0436\u043d\u0435\u0435 \u0431\u044b\u043b\u043e \u0431\u044b \u0432\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u0441\u0435, \u0447\u0435\u043c\u0443 \u044f \u043d\u0430\u0443\u0447\u0438\u043b\u0441\u044f, \u0432 \u0441\u0432\u043e\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u042f \u0434\u0443\u043c\u0430\u044e, \u0434\u0435\u043c\u043a\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430, \u0447\u0442\u043e CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u044f\u044e\u0449\u0438\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u0443\u0442\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<p>  \u0421\u043b\u043e\u0436\u043d\u044b\u0435 CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0443\u0436\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043d\u043e \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0442\u043e\u043c\u043b\u044f\u0435\u0442. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0442 \u0437\u0430\u0434\u0430\u0447\u0443, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Adobe Edge Animate \u0438 Sencha Animator, \u043d\u043e \u043e\u043d\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0442 CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0435 \u0432 JS. \u042d\u0442\u043e \u043f\u0440\u043e\u0432\u0430\u043b, \u043a\u0430\u043a \u043f\u043e \u043c\u043d\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u0438\u043b\u0430 CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u043e\u043f\u0438\u0440\u0430\u044f\u0441\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. \u042f \u043d\u0435 \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u043e\u0439\u0442\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u0445 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u043a\u0442\u043e-\u0442\u043e \u0437\u043d\u0430\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435, \u044f \u0431\u044b \u0441 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435\u043c \u0443\u0437\u043d\u0430\u043b \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n<p>  \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u043a \u043c\u043e\u0435\u043c\u0443 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044e, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043b CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c canvas \u0438 SVG, \u044f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u0432\u0441\u0435 \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u043e\u0439\u043d\u044b\u043c\u0438 \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442\u0430\u043c\u0438 \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0447\u0435\u043c \u0440\u0430\u043d\u044c\u0448\u0435 \u0431\u0430\u0440\u044c\u0435\u0440 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0437\u0430\u0442\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0443\u043f\u0430\u0434\u0435\u0442, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u0441\u0442 \u0434\u043b\u044f \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/b7c\/7b0\/6bd\/b7c7b06bd3a3f81d39725924ffd967f2.jpg\"\/>          \t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/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=\"http:\/\/habrahabr.ru\/post\/159315\/\"> http:\/\/habrahabr.ru\/post\/159315\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">       <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/1fa\/a28\/1a5\/1faa281a5940bdaf0ac0a95f1c11af38.jpg\"\/><br \/>  <i>\u0412 \u044d\u0442\u043e\u043c \u0445\u0430\u0431\u0440\u0430\u0442\u043e\u043f\u0438\u043a\u0435 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0434\u0435\u043c\u043a\u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/demos\/detail\/media-query-mario\">Media Query Mario<\/a>, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432 <a href=\"http:\/\/habrahabr.ru\/company\/zfort\/blog\/158093\/\">\u0434\u0430\u0439\u0434\u0436\u0435\u0441\u0442\u0435 Zfort #30<\/a>. <\/i><\/p>\n<p>  \u042f \u043e\u0431\u043e\u0436\u0430\u044e \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u043e\u0432\u043e\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u043c\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u043c\u043e\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0422\u043e, \u0447\u0442\u043e \u043b\u044e\u0434\u0438 \u043f\u043e\u0440\u043e\u0439 \u0432 \u043d\u0438\u0445 \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u044e\u0442, \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u043e\u0440\u0432\u0430\u0442\u044c \u043c\u043e\u0437\u0433 \u0441\u0432\u043e\u0435\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u044f <a href=\"http:\/\/2012.webdevconf.com\/\">WebDevConf 2012<\/a> \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u043e\u043a\u0442\u044f\u0431\u0440\u044f, \u044f \u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0442\u043e \u0441\u0430\u043c\u043e\u0435, \u0432\u043e\u0437\u0432\u044b\u0448\u0435\u043d\u043d\u043e\u0435 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u043f\u043e\u0434\u043d\u043e\u0441\u0438\u0442 \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044f\u0441\u044c \u0441 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 \u0432 \u041b\u043e\u043d\u0434\u043e\u043d, \u044f \u0437\u0430\u043c\u0435\u0442\u0438\u043b <a href=\"https:\/\/twitter.com\/mozhacks\/status\/258669800786640896\">\u0442\u0432\u0438\u0442<\/a> \u043e Mozilla Dev Derby, \u0438, \u0432\u0441\u0435 \u0435\u0449\u0435 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439, \u0440\u0435\u0448\u0438\u043b \u0432\u043d\u0435\u0441\u0442\u0438 \u0441\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0441\u0442\u0430\u043b\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u043c\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/demos\/detail\/media-query-mario\">Media Query Mario<\/a>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u043c\u0435\u0441\u044c \u0438\u0437 \u043c\u0435\u0434\u0438\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, CSS3 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 <a href=\"https:\/\/developer.mozilla.org\/en\/html\/html5\">HTML5<\/a> audio.  <\/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-159315","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/159315","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=159315"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/159315\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=159315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=159315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=159315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}