{"id":2834,"date":"2014-12-04T16:25:32","date_gmt":"2014-12-04T12:25:32","guid":{"rendered":"http:\/\/idg.net.ua\/blog\/?p=2834"},"modified":"2016-09-28T16:59:01","modified_gmt":"2016-09-28T12:59:01","slug":"vsplyvayushhie-uvedomleniya-css-animatsiya","status":"publish","type":"post","link":"https:\/\/idg.net.ua\/blog\/vsplyvayushhie-uvedomleniya-css-animatsiya","title":{"rendered":"\u0412\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u2013 CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f"},"content":{"rendered":"<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c CSS. \u0422\u0430\u043a\u0438\u0435 \u043e\u043a\u043e\u0448\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0438 \u043d\u0435\u043d\u0430\u0432\u044f\u0437\u0447\u0438\u0432\u043e \u0443\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u044c \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044f \u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439.<!--more--><\/p>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 \u0434\u0435\u043c\u043e (\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 CSS3 Animations), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0430\u0440\u0445\u0438\u0432 \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p style=\"text-align: center;\"><a target=\"_blank\" class=\"button large custom \" href=\"\/blog\/wp-content\/uploads\/vsplyvajushhie-uvedomlenija-css.html\"  style=\"background:#FF5600;\" >\u0414\u0435\u043c\u043e<\/a> <a class=\"button large\" href=\"\/blog\/wp-content\/uploads\/vsplyvajushhie-uvedomlenija-css.rar\" >\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0430\u0440\u0445\u0438\u0432 RAR<\/a><\/p>\n<h3>HTML<\/h3>\n<p>\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430 <code>&lt;div&gt;<\/code> \u0441 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 <code>notif<\/code> \u0438 <code>notif-color-1<\/code>, <code>notif-color-2<\/code>, <code>notif-color-3<\/code> \u2013 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u043a\u043e\u0448\u043a\u0430 \u0442\u0440\u0435\u0445 \u0446\u0432\u0435\u0442\u043e\u0432. \u0412 \u0431\u043b\u043e\u043a\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 (\u0442\u0435\u043a\u0441\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f) \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d <code>&lt;div&gt;<\/code> \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430 (\u043a\u043b\u0430\u0441\u0441 <code>notif-progress<\/code>):<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div class=&quot;notif notif-color-1&quot;&gt;\r\n&lt;p&gt;\u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u044b!&lt;\/p&gt;\r\n&lt;div class=&quot;notif-progress&quot;&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=&quot;notif notif-color-2&quot;&gt;\r\n&lt;p&gt;\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d.&lt;\/p&gt;\r\n&lt;div class=&quot;notif-progress&quot;&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=&quot;notif notif-color-3&quot;&gt;\r\n&lt;p&gt;\u0423 \u0412\u0430\u0441 1 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435.&lt;p&gt;\r\n&lt;div class=&quot;notif-progress&quot;&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h3>CSS<\/h3>\n<p>\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439, \u0442\u0435\u043a\u0441\u0442\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.notif {\r\n width: 280px;\r\n position: relative;\r\n margin: 0 auto 25px auto;\r\n padding: 30px 20px;\r\n text-align: left;\r\n border-radius: 12px;\r\n opacity: 0;\r\n -ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;\r\n filter: alpha(opacity=0); \r\n cursor: default;\r\n display: none;\r\n}\r\n\r\n.notif p {\r\n text-align: left;\r\n font-weight: bold;\r\n font-size: 16px;\r\n margin: 0;\r\n}\r\n\r\n.notif p:before {\r\n text-align: center;\r\n border: 3px solid rgba(255, 255, 255, 1);\r\n margin-top: -18px;\r\n top: 50%;\r\n right: 25px;\r\n width: 30px;\r\n content: '!';\r\n font-size: 30px;\r\n color: rgba(255, 255, 255, 1);\r\n position: absolute;\r\n height: 30px;\r\n line-height: 30px;\r\n border-radius: 50%;\r\n}\r\n\r\n.notif-progress {\r\n width: 0;\r\n height: 10px;\r\n background: rgba(255,255,255,0.5);\r\n position: absolute;\r\n bottom: 5px;\r\n left: 3%;\r\n border-radius: 12px;\r\n}\r\n<\/pre>\n<p>&nbsp;<br \/>\n\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u043a\u043e\u0448\u043a\u0430:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.notif-color-1 {\r\n background: #F89406;\r\n}\r\n\r\n.notif-color-1 p {\r\n color: #FFF;\r\n}\r\n\r\n.notif-color-2 {\r\n background: #59ABE3;\r\n}\r\n\r\n.notif-color-2 p {\r\n color: #FFF;\r\n}\r\n\r\n.notif-color-3 {\r\n background: #00B16A;\r\n}\r\n\r\n.notif-color-3 p {\r\n color: #FFF;\r\n}\r\n<\/pre>\n<p>&nbsp;<br \/>\n\u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <code>look-btn<\/code> \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ninput.look-btn:checked ~ section .notif {\r\n display: block;\r\n -webkit-animation: fadeOut 3s linear forwards;\r\n -moz-animation: fadeOut 3s linear forwards;\r\n -o-animation: fadeOut 3s linear forwards;\r\n -ms-animation: fadeOut 3s linear forwards;\r\n animation: fadeOut 3s linear forwards;\r\n}\r\n\r\ninput.look-btn:checked ~ section .notif .notif-progress {\r\n -webkit-animation: runProgress 2s linear forwards 0.7s;\r\n -moz-animation: runProgress 2s linear forwards 0.7s;\r\n -o-animation: runProgress 2s linear forwards 0.7s;\r\n -ms-animation: runProgress 2s linear forwards 0.7s;\r\n animation: runProgress 2s linear forwards 0.7s;\r\n}\r\n<\/pre>\n<p>&nbsp;<br \/>\n\u042d\u0444\u0444\u0435\u043a\u0442 \u0437\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nfadeOut {\r\n 0% { opacity: 0; }\r\n 10% { opacity: 1; }\r\n 90% { opacity: 1; -webkit-transform: translateY(0px);}\r\n 99% { opacity: 0; -webkit-transform: translateY(-25px);}\r\n 100% { opacity: 0; }\r\n}\r\n<\/pre>\n<p>&nbsp;<br \/>\n&#8230;\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u0430:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nrunProgress {\r\n 0%{ width: 0%; }\r\n 100%{ width: 94%; }\r\n}\r\n<\/pre>\n<p>&nbsp;<br \/>\n\u0412\u043e\u0442 \u0442\u0430\u043a\u0438\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u044b\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<br \/>\n\u0422\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u0443\u0441\u043f\u0435\u0445\u043e\u0432 \u0432\u0430\u043c!<\/p>\n<div class=\"crfp-average-rating\">Average Rating: <div class=\"crfp-rating crfp-rating-5\"><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c CSS. \u0422\u0430\u043a\u0438\u0435 \u043e\u043a\u043e\u0448\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0438 \u043d\u0435\u043d\u0430\u0432\u044f\u0437\u0447\u0438\u0432\u043e \u0443\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u044c \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044f \u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439.<\/p>\n<p> Average Rating:<span class=\"more-link\"><a href=\"https:\/\/idg.net.ua\/blog\/vsplyvayushhie-uvedomleniya-css-animatsiya\" class=\"more-link\">\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435<\/a><\/span><\/p>\n","protected":false},"author":6,"featured_media":2848,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts\/2834"}],"collection":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/comments?post=2834"}],"version-history":[{"count":15,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts\/2834\/revisions"}],"predecessor-version":[{"id":8355,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/posts\/2834\/revisions\/8355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/media\/2848"}],"wp:attachment":[{"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/media?parent=2834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/categories?post=2834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idg.net.ua\/blog\/wp-json\/wp\/v2\/tags?post=2834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}