{"id":5268,"date":"2018-06-11T11:47:45","date_gmt":"2018-06-11T02:47:45","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=5268"},"modified":"2020-05-28T13:50:44","modified_gmt":"2020-05-28T04:50:44","slug":"%ed%95%9c%eb%b2%88-%ec%a0%81%ec%9a%a9%eb%90%9c-css3-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98keyframes%ec%9d%84-%eb%8b%a4%ec%8b%9c-%ec%a0%81%ec%9a%a9%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=5268","title":{"rendered":"\ud55c\ubc88 \uc801\uc6a9\ub41c CSS3 \uc560\ub2c8\uba54\uc774\uc158(@keyframes)\uc744 \ub2e4\uc2dc \uc801\uc6a9\ud558\uae30"},"content":{"rendered":"<p>DOM \uc694\uc18c\uc5d0 CSS3\uc758 animation-name\uc744 \uc9c0\uc815\ud574 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc9c0\uc815\ud574 \ud50c\ub808\uc774\ud558\uace0 \ub09c \ub4a4, \ub2e4\uc2dc \uc774 DOM \uc694\uc18c\uc5d0 animation-name\uc744 \uc9c0\uc815\ud558\uba74 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ud50c\ub808\uc774 \ub418\uc9c0 \uc54a\ub294\ub2e4. \uc774\uc5d0 \ub300\ud55c CSS\uc640 JS \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4. \uba3c\uc800 CSS \uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\r\n<style>\r\n.blank {\r\n    animation-name: keyframes-blank;\r\n    animation-duration: 1s;\r\n    animation-iteration-count: 1;\r\n}\r\n\r\n@keyframes keyframes-blank {\r\n    0% {\r\n        opacity: 1;\r\n        transform: scale(1,1);\r\n    }\r\n\r\n    100% {\r\n        opacity: 0;\r\n        transform: scale(20,20);\r\n    }\r\n}\r\n<\/style>\r\n<\/pre>\n<p>\ub2e4\uc74c\uc740 js\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n<script>\r\n    var domCounting = document.querySelector(\"#dom_id\");   \r\n    domCounting.classList.remove(\"blank\");\r\n    domCounting.classList.toggle(\"blank\"); \r\n<\/script>\r\n<\/pre>\n<p>id\uac00 dom_id\uc778 DOM \uac1d\uccb4\uc5d0 blank \ud074\ub798\uc2a4\ub97c \ucc98\uc74c \uc9c0\uc815\ud560\ub54c\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ubc1c\uc0dd\ud558\uc9c0\ub9cc, \ub450\ubc88\uc9f8\ubd80\ud130\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\ub294\ub2e4. \uc774\ub7f4 \ub54c\ub294 23\ubc88\uacfc 24\ubc88 \ucf54\ub4dc \uc0ac\uc774\uc5d0 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ucd94\uac00\ud55c\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\ndomCounting.offsetWidth;\r\n<\/pre>\n<p>\uc774\uac74 Bug\uc77c\uae4c.. \uc544\ub2c8\uba74 \uc758\ub3c4\ub41c \uac83\uc77c\uae4c..<\/p>\n","protected":false},"excerpt":{"rendered":"<p>DOM \uc694\uc18c\uc5d0 CSS3\uc758 animation-name\uc744 \uc9c0\uc815\ud574 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc9c0\uc815\ud574 \ud50c\ub808\uc774\ud558\uace0 \ub09c \ub4a4, \ub2e4\uc2dc \uc774 DOM \uc694\uc18c\uc5d0 animation-name\uc744 \uc9c0\uc815\ud558\uba74 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ud50c\ub808\uc774 \ub418\uc9c0 \uc54a\ub294\ub2e4. \uc774\uc5d0 \ub300\ud55c CSS\uc640 JS \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4. \uba3c\uc800 CSS \uc785\ub2c8\ub2e4. \ub2e4\uc74c\uc740 js\uc785\ub2c8\ub2e4. id\uac00 dom_id\uc778 DOM \uac1d\uccb4\uc5d0 blank \ud074\ub798\uc2a4\ub97c \ucc98\uc74c \uc9c0\uc815\ud560\ub54c\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ubc1c\uc0dd\ud558\uc9c0\ub9cc, \ub450\ubc88\uc9f8\ubd80\ud130\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\ub294\ub2e4. \uc774\ub7f4 \ub54c\ub294 23\ubc88\uacfc 24\ubc88 \ucf54\ub4dc \uc0ac\uc774\uc5d0 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ucd94\uac00\ud55c\ub2e4. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=5268\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;\ud55c\ubc88 \uc801\uc6a9\ub41c CSS3 \uc560\ub2c8\uba54\uc774\uc158(@keyframes)\uc744 \ub2e4\uc2dc \uc801\uc6a9\ud558\uae30&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[105],"tags":[],"class_list":["post-5268","post","type-post","status-publish","format-standard","hentry","category-html5"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5268"}],"version-history":[{"count":6,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5268\/revisions"}],"predecessor-version":[{"id":9598,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/5268\/revisions\/9598"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5268"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}