{"id":92,"date":"2016-05-23T17:58:00","date_gmt":"2016-05-23T08:58:00","guid":{"rendered":"https:\/\/trret.com\/?p=92"},"modified":"2021-03-19T23:42:34","modified_gmt":"2021-03-19T14:42:34","slug":"css-keyframe-%ec%98%88%ec%a0%9c","status":"publish","type":"post","link":"https:\/\/trret.com\/?p=92","title":{"rendered":"CSS keyframe \uc608\uc81c"},"content":{"rendered":"\n<p>css\ub9cc\uc73c\ub85c \uc2ac\ub77c\uc774\ub4dc \ubc30\ub108\ud6a8\uacfc \ub0b4\uae30<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!doctype html>\n&lt;html lang=\"ko\">\n    &lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">   \n  &lt;title>Document&lt;\/title>\n  &lt;style type=\"text\/css\">\n        html, body, div, figure, input, textarea, p{margin:0;padding:0;}\n        figure {display:block;}\n    img{border:0; max-width:100%; vertical-align:middle;}\n    body{color:#333; font-size:12px; font-family:\"NanumGothic\",\"Malgun Gothic\",dotum,sans-serif; background:#fff}\n  &lt;\/style>\n  &lt;script src=\"http:\/\/code.jquery.com\/jquery-1.12.1.min.js\">&lt;\/script>\n  &lt;!-- IE \uc5d0 css3 \uc0c8\ub85c\uc6b4 \ub9c8\ud06c\uc5c5\uc744  \uc778\uc2dd\uc2dc\ud0a4\ub294 \uc2a4\ud06c\ub9bd\ud2b8 -->\n  &lt;!--&#91;if lte IE 9]>\n    &lt;script src=\"http:\/\/html5shiv.googlecode.com\/svn\/trunk\/html5.js\">&lt;\/script>\n  &lt;!&#91;endif] -->\n\n    &lt;\/head>\n    &lt;body>\n &lt;style>\n    @keyframes slidy {\n        0% { left: 0%; }\n        20% { left: 0%; }\n        25% { left: -100%; }\n        45% { left: -100%; }\n        50% { left: -200%; }\n        70% { left: -200%; }\n        75% { left: -300%; }\n        95% { left: -300%; }\n        100% { left: -400%; }\n    }\n    body { margin: 0; }\n    div#slider { width:200px; overflow: hidden; }\n    div#slider figure img { width: 20%; float: left; }\n    div#slider figure {\n        position: relative;\n        width: 500%;\n        margin: 0;\n        top:0;\n        left: 0;\n        text-align: left;\n        font-size: 0;\n        -webkit-animation:10s slidy ease-in-out infinite;\n        animation-name: slidy;\n        animation-duration:10s;\n        animation-timing-function:ease-in-out;\n        animation-fill-mode:both;\n        animation-iteration-count:infinite;\n    }\n &lt;\/style>\n &lt;div id=\"slider\">\n    &lt;figure>\n     &lt;img src=\"http:\/\/placehold.it\/100x100\" alt=\"\">\n     &lt;img src=\"http:\/\/placehold.it\/200x200\" alt=\"\">\n     &lt;img src=\"http:\/\/placehold.it\/300x300\" alt=\"\">\n     &lt;img src=\"http:\/\/placehold.it\/400x400\" alt=\"\">\n   &lt;\/figure>\n &lt;\/body>\n&lt;\/html>\n\n\n<\/code><\/pre>\n\n\n\n<p>\ubc30\uacbd \ubcc0\ud654, \ubc18\ubcf5 \uc6c0\uc9c1\uc784<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.animation1 {\n  animation: circle 1s ease infinite;\n}\n\n@-webkit-keyframes circle {\n  100% {\n    -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0;\n  }\n}\n\n@keyframes circle {\n  100% {\n    -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0;\n  }\n}\n\n.animation4 {\n  background: linear-gradient(200deg, #996045, #5c2a48, #327d77);\n  background-size: 800% 800%;\n  -webkit-animation: AnimationName 10s ease infinite;\n  -moz-animation: AnimationName 10s ease infinite;\n  -o-animation: AnimationName 10s ease infinite;\n  animation: AnimationName 10s ease infinite;    \n}\n\n@-webkit-keyframes AnimationName {\n    0%{background-position:77% 0%}\n    50%{background-position:24% 100%}\n    100%{background-position:77% 0%}\n}\n@-moz-keyframes AnimationName {\n    0%{background-position:77% 0%}\n    50%{background-position:24% 100%}\n    100%{background-position:77% 0%}\n}\n@-o-keyframes AnimationName {\n    0%{background-position:77% 0%}\n    50%{background-position:24% 100%}\n    100%{background-position:77% 0%}\n}\n@keyframes AnimationName {\n    0%{background-position:77% 0%}\n    50%{background-position:24% 100%}\n    100%{background-position:77% 0%}\n} <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>css\ub9cc\uc73c\ub85c \uc2ac\ub77c\uc774\ub4dc \ubc30\ub108\ud6a8\uacfc \ub0b4\uae30 \ubc30\uacbd \ubcc0\ud654, \ubc18\ubcf5 \uc6c0\uc9c1\uc784<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[],"_links":{"self":[{"href":"https:\/\/trret.com\/index.php?rest_route=\/wp\/v2\/posts\/92"}],"collection":[{"href":"https:\/\/trret.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trret.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trret.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=92"}],"version-history":[{"count":2,"href":"https:\/\/trret.com\/index.php?rest_route=\/wp\/v2\/posts\/92\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/trret.com\/index.php?rest_route=\/wp\/v2\/posts\/92\/revisions\/101"}],"wp:attachment":[{"href":"https:\/\/trret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trret.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}