{"id":2277,"date":"2015-11-06T10:20:32","date_gmt":"2015-11-06T10:20:32","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=2277"},"modified":"2017-01-26T22:33:03","modified_gmt":"2017-01-26T13:33:03","slug":"%ec%9b%b9-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98-23-%e3%85%a1-keyframe-animation-%eb%b0%a9%ec%8b%9d","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=2277","title":{"rendered":"\uc6f9 \uc560\ub2c8\uba54\uc774\uc158 2\/3 \u3161 keyframe animation \ubc29\uc2dd"},"content":{"rendered":"<p>\uc6f9\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc81c\uacf5\ud558\ub294 \ubc29\uc2dd \uc911 \ub450\ubc88\uc9f8\ub294 Keyframe \uac1c\ub150\uc73c\ub85c \uc811\uadfc\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ub294 \uc804\uccb4 \uc560\ub2c8\uba54\uc774\uc158\uc744 100%\ub77c\uace0 \ud560\ub54c \uac01 \ub2e8\uacc4\ub9c8\ub2e4 \uc560\ub2c8\uba54\uc774\uc158\ub420 \uc18d\uc131\uac12\uc744 \uc9c0\uc815\ud574 \uc8fc\ub294 \ubc29\uc2dd\uc73c\ub85c\uc368 \uadf8 \uc911\uac04 \ud654\uba74\uc740 \uc790\ub3d9\uc73c\ub85c \uacc4\uc0b0\ud574 \uc90d\ub2c8\ub2e4. \uc544\ub798\uc758 \ud654\uba74\uc740 Key frame Animation \ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc5d0 \ub300\ud55c \ud654\uba74\uc785\ub2c8\ub2e4.<\/p>\n<p>[xyz-ihs snippet=&#8221;keyframe-Animation&#8221;]<\/p>\n<p>\uc704\uc758 \ud654\uba74\uc5d0 \ub300\ud55c \uc608\ub97c \ud1b5\ud574 \ud0a4\ud504\ub808\uc784 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc815\ub9ac\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. <\/p>\n<p>\uac00\uc7a5 \uba3c\uc800 \uc6c0\uc9c1\uc774\ub294 \ub178\ub780 \uc0ac\uac01\ud615\uc5d0 \ub300\ud55c div\uc5d0 \ub300\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n<pre>\r\n<div class=\"box\"><\/div>\r\n<\/pre>\n<p>\uc774 div\uc758 \ud074\ub798\uc2a4\ub294 box\uc778\ub370, \uc544\uc9c1 \ud06c\uae30\uc640 \uc0c9\uc0c1\uacfc \uac19\uc740 \uc2a4\ud0c0\uc77c\uc774 \uc9c0\uc815\ub418\uc9c0 \uc54a\uc740 \uc0c1\ud0dc\uc774\ubbc0\ub85c \uc774 box \ud074\ub798\uc2a4\uc5d0 \ud574\ub2f9 \uc2a4\ud0c0\uc77c\uc744 \uc544\ub798\ucc98\ub7fc \uc9c0\uc815\ud569\ub2c8\ub2e4.<\/p>\n<pre>\r\n    .box {\r\n        width: 100px;\r\n        height: 100px;\r\n        background: #ffd800;\r\n        box-shadow: 0 10px 20px rgba(0,0,0,0.5);\r\n\r\n        animation-name: movingBox;\r\n        animation-duration: 2300ms;\r\n        animation-iteration-count: infinite;\r\n        animation-direction: alternate;\r\n    }\r\n<\/pre>\n<p>2~5\ubc88\uac00\uc9c0\uc758 \ucf54\ub4dc\uac00 div\uc758 \ud06c\uae30\uc640 \uc0c9\uc0c1 \uadf8\ub9ac\uace0 \uadf8\ub9bc\uc790\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c \uc9c0\uc815\uc785\ub2c8\ub2e4. 7~10\ubc88 \ucf54\ub4dc\ub294 \ud0a4\ud504\ub808\uc784 \uc560\ub2c8\uba54\uc774\uc158\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c\uc785\ub2c8\ub2e4. 7\ubc88 \ucf54\ub4dc\ub294 \uad6c\uccb4\uc801\uc778 \ud0a4\ud504\ub808\uc784\uc5d0 \ub300\ud55c \uc544\uc774\ub514\uac12\uc774\uace0, 8\ubc88\uc740 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc9c4\ud589\ub418\ub294 \uc2dc\uac04\uc744 2.3\ucd08\ub85c \uc9c0\uc815\ud588\uc73c\uba70, 9\ubc88\uc740 \ubb34\ud55c\ubc18\ubcf5, 10\ubc88\uc740 \ubb34\ud55c\ubc18\ubcf5\uc2dc \ubc18\ubcf5\ubc29\ud5a5\uc744 \uc9c0\uc815\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uc774\uc81c 7\ubc88\uc5d0\uc11c \uc9c0\uc815\ud55c \ud0a4\ud504\ub808\uc784\uc5d0 \ub300\ud55c \uc544\uc774\ub514\uc778 movingBox\uc5d0 \ub300\ud55c \uc815\uc758\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre>\r\n@keyframes movingBox {\r\n    0% {\r\n        transform: translate(0, 0);\r\n        opacity: 0.3;\r\n    }\r\n\r\n    25% {\r\n        opacity: 0.9;\r\n    }\r\n\r\n    50% {\r\n        transform: translate(400px, 0);\r\n        opacity: 0.2;\r\n    }\r\n\r\n    100% {\r\n        transform: translate(100px, 0);\r\n        opacity: 0.8;\r\n    }\r\n}\r\n<\/pre>\n<p>\ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uba74, \ucd08\uae30\ub2e8\uacc4(0%)\uc640 1\/4\uc9c0\uc810(25%) \uadf8\ub9ac\uace0 \uc911\uac04\uc9c0\uc810(50%) \ubc0f \ub05d\uc9c0\uc810(100%)\uc758 \uc0c1\ud0dc\uc5d0\uc11c\uc758 \uc704\uce58\uc640 \ud22c\uba85\ub3c4\ub97c \uc9c0\uc815\ud568\uc73c\ub85c\uc368, \uac01 \ub2e8\uacc4\uc758 \uc911\uac04\uacb0\uacfc\ub97c \uc790\ub3d9\uc73c\ub85c \uacc4\uc0b0\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc774\ub8e8\uc5b4\uc9c0\ub3c4\ub85d \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc6f9\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc81c\uacf5\ud558\ub294 \ubc29\uc2dd \uc911 \ub450\ubc88\uc9f8\ub294 Keyframe \uac1c\ub150\uc73c\ub85c \uc811\uadfc\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774\ub294 \uc804\uccb4 \uc560\ub2c8\uba54\uc774\uc158\uc744 100%\ub77c\uace0 \ud560\ub54c \uac01 \ub2e8\uacc4\ub9c8\ub2e4 \uc560\ub2c8\uba54\uc774\uc158\ub420 \uc18d\uc131\uac12\uc744 \uc9c0\uc815\ud574 \uc8fc\ub294 \ubc29\uc2dd\uc73c\ub85c\uc368 \uadf8 \uc911\uac04 \ud654\uba74\uc740 \uc790\ub3d9\uc73c\ub85c \uacc4\uc0b0\ud574 \uc90d\ub2c8\ub2e4. \uc544\ub798\uc758 \ud654\uba74\uc740 Key frame Animation \ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc5d0 \ub300\ud55c \ud654\uba74\uc785\ub2c8\ub2e4. [xyz-ihs snippet=&#8221;keyframe-Animation&#8221;] \uc704\uc758 \ud654\uba74\uc5d0 \ub300\ud55c \uc608\ub97c \ud1b5\ud574 \ud0a4\ud504\ub808\uc784 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc815\ub9ac\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uac00\uc7a5 \uba3c\uc800 \uc6c0\uc9c1\uc774\ub294 \ub178\ub780 \uc0ac\uac01\ud615\uc5d0 \ub300\ud55c &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=2277\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;\uc6f9 \uc560\ub2c8\uba54\uc774\uc158 2\/3 \u3161 keyframe animation \ubc29\uc2dd&#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":[88],"tags":[],"class_list":["post-2277","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2277","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=2277"}],"version-history":[{"count":1,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2277\/revisions"}],"predecessor-version":[{"id":2714,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/2277\/revisions\/2714"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2277"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}