{"id":5087,"date":"2020-01-30T15:37:40","date_gmt":"2020-01-30T06:37:40","guid":{"rendered":"http:\/\/www.otwo.jp\/blog\/?p=5087"},"modified":"2020-01-30T15:37:40","modified_gmt":"2020-01-30T06:37:40","slug":"css_animation_steps","status":"publish","type":"post","link":"https:\/\/www.otwo.jp\/blog\/css_animation_steps\/","title":{"rendered":"\u3010CSS\u3011\u30b9\u30d7\u30e9\u30a4\u30c8\u753b\u50cf\u3092steps\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u65b9\u6cd5\u30fb\u4f5c\u308a\u65b9"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/css_animesprite_main.png\" alt=\"\" width=\"700\" height=\"400\" class=\"alignnone size-full wp-image-5252\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/css_animesprite_main.png 700w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/css_animesprite_main-150x86.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/css_animesprite_main-300x171.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>\u3053\u3093\u306b\u3061\u306f\u3002<br \/>\nWeb\u30c7\u30b6\u30a4\u30ca\u30fc\u306e\u5c71\u672c\u3067\u3059\u3002<br \/>\n\u4eca\u56de\u306fCSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3001animation-timing-function\u306esteps\u3068\u30b9\u30d7\u30e9\u30a4\u30c8\u753b\u50cf\u3092\u4f7f\u3063\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n<div class=\"pageContents\">\n<p class=\"title\">\u3082\u304f\u3058<\/p>\n<dl>\n<dt><a href=\"#step1\">\u30b9\u30d7\u30e9\u30a4\u30c8\u753b\u50cf\u3068\u306f\uff1f<\/a><\/dt>\n<dt><a href=\"#step2\">steps\u3068\u306f\uff1f<\/a><\/dt>\n<dt><a href=\"#step3\">\u4f5c\u308a\u65b9<\/a><\/dt>\n<\/dl>\n<\/div>\n<p>CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u95a2\u3057\u307e\u3057\u3066\u306f\u3001\u3053\u3061\u3089\u306e\u8a18\u4e8b\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<div class=\"externalLink\" style=\"margin: 0px;\"><a href=\"http:\/\/www.otwo.jp\/blog\/css_animation\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u3010\u4fdd\u5b58\u7248\u3011CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u7a2e\u985e\u30fb\u4f7f\u3044\u65b9\u30fb\u30b5\u30f3\u30d7\u30eb<\/a><\/div>\n<h1 id=\"step1\">\u30b9\u30d7\u30e9\u30a4\u30c8\u753b\u50cf\u3068\u306f\uff1f<\/h1>\n<p>\u307e\u305a\u30b9\u30d7\u30e9\u30a4\u30c8\u753b\u50cf\u3068\u306f\u3001<span style=\"color: red;\">\u8907\u6570\u306e\u753b\u50cf\u3092\uff11\u679a\u306b\u307e\u3068\u3081\u305f\u753b\u50cf<\/span>\u306e\u3053\u3068\u3067\u3001CSS\u3067\u8868\u793a\u7bc4\u56f2\u3092\u6307\u5b9a\u3057\u3066\u4f7f\u7528\u3057\u307e\u3059\u3002<br \/>\n\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3084\u5bb9\u91cf\u8efd\u6e1b\u3001\u4eca\u56de\u306e\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u305f\u3081\u306b\u4f7f\u308f\u308c\u308b\u3053\u3068\u304c\u591a\u3044\u3067\u3059\u3002<\/p>\n<p>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u3059\u308b\u306a\u3089\u3001\u3053\u3093\u306a\u611f\u3058\u306e\u753b\u50cf\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/chaka.png\" alt=\"\" class=\"alignnone size-full wp-image-5191\" width=\"1580\" height=\"121\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/chaka.png 1580w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/chaka-150x11.png 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/chaka-300x23.png 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/chaka-768x59.png 768w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/chaka-1024x78.png 1024w\" sizes=\"(max-width: 1580px) 100vw, 1580px\" \/><\/p>\n<p>\u4e0a\u8a18\u3092css\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306esteps\u3092\u4f7f\u3046\u3068\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<style>\n.chaka{\n     position: relative;\n     width:79px;\n     height:121px;\n     left:7px;\n     background:url(http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/chaka.png) no-repeat;\n     animation: chaka 2.9s steps(20) infinite;\n     z-index:5;\n}\n@keyframes chaka {\n     to{\n          background-position: -1580px 0;\n     }\n}<\/p>\n<p>@-webkit-keyframes chaka {\n     to{\n          background-position: -1580px 0;\n     }\n}\n@-moz-keyframes chaka {\n     to{\n          background-position: -1580px 0;\n     }\n}\n<\/style>\n<div class=\"chaka\"><\/div>\n<h1 id=\"step1\">steps\u3068\u306f\uff1f<\/h1>\n<p>steps\u306fCSS\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3042\u308banimation-timing-function\u306e\u5024\u306e\u4e00\u3064\u3067\u3001<span style=\"color: red;\">\u30b3\u30de\u64ae\u308a\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u3088\u3046\u306a\u52d5\u304d<\/span>\u3092\u3055\u305b\u308b\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002<br \/>\nanimation-timing-function\u306f\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e<span style=\"color: red;\">\u901f\u5ea6<\/span>\u3092\u6307\u5b9a\u3059\u308b\u3068\u304d\u306b\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n<style>\n.yellow{\n     background:yellow;\n}\n<\/style>\n<h3>animation-timing-function\uff08\u901f\u5ea6\uff09\u306e\u5024\u4e00\u89a7<\/h3>\n<div style=\"font-size: 90%; background-color: #efefef; padding: 2% 2.5%; border-radius: 10px; line-height: 1.8em; margin: 0 0 5%;\">\n\u30fb<span class=\"yellow\">step-start<\/span>\uff1a\u6700\u521d\u304b\u3089\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u7d42\u4e86\u6642\u306e\u72b6\u614b\u306b\u306a\u308b<br \/>\n\u30fb<span class=\"yellow\">step-end<\/span>\uff1a\u6700\u5f8c\u306b\u4e00\u77ac\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u7d42\u4e86\u6642\u306e\u72b6\u614b\u306b\u306a\u308b<br \/>\n\u30fb<span class=\"yellow\">steps(n , start)<\/span>\uff1an\u306e\u56de\u6570\u3060\u3051\u30b3\u30de\u9001\u308a\u3059\u308b\u3002\u958b\u59cb\u76f4\u5f8c\u306b\uff11\u6bb5\u968e\u76ee\u306e\u5909\u5316\u304c\u767a\u751f\u3002<br \/>\n\u30fb<span class=\"yellow\">steps(n , end)<\/span>\uff1an\u306e\u56de\u6570\u3060\u3051\u30b3\u30de\u9001\u308a\u3059\u308b\u3002\u6700\u521d\u306e\u30a4\u30f3\u30bf\u30fc\u30d0\u30eb\u7d4c\u904e\u5f8c\u306b\uff11\u6bb5\u968e\u76ee\u306e\u5909\u5316\u304c\u767a\u751f\u3002end\u3092\u7701\u7565\u3059\u308b\u3053\u3068\u3082\u53ef\uff08\u521d\u671f\u5024\uff09<br \/>\n\u30fbease\uff1a\u3086\u3063\u304f\u308a\u59cb\u307e\u3063\u3066\u3001\u3086\u3063\u304f\u308a\u7d42\u308f\u308b\uff08\u521d\u671f\u5024\uff09<br \/>\n\u30fbease-in\uff1a\u3086\u3063\u304f\u308a\u59cb\u307e\u308b<br \/>\n\u30fbease-out\uff1a\u3086\u3063\u304f\u308a\u7d42\u308f\u308b<br \/>\n\u30fbease-in-out\uff1aease\u3088\u308a\u3055\u3089\u306b\u3086\u3063\u304f\u308a\u59cb\u307e\u3063\u3066\u3001\u3086\u3063\u304f\u308a\u7d42\u308f\u308b<br \/>\n\u30fblinear\uff1a\u4e00\u5b9a\u306e\u901f\u5ea6\u3067\u59cb\u307e\u3063\u3066\u7d42\u308f\u308b<br \/>\n\u30fbcubic-bezier(x1, y1, x2, y2)\uff1a[0.0 , 0.0] \u304b\u3089\u59cb\u307e\u308a\u3001[x1 , y1], [x2 , y2] \u3092\u7d4c\u7531\u3057\u3066\u6700\u7d42\u7684\u306b[1.0 , 1.0]\u306b\u5909\u5316\u3002X\u8ef8\u306f\u6642\u9593\u7d4c\u904e\u7387\u3001Y\u8ef8\u306f\u5909\u5316\u7387\u3092\u8868\u3059\u3002x\u306f0.0 \uff5e 1.0\u307e\u3067\u3001y\u306f\u57fa\u672c\u81ea\u7531\u3067\u8ca0\u306e\u5024\u3082\u4f7f\u7528\u53ef<\/div>\n<p>\u52d5\u304d\u306e\u30b5\u30f3\u30d7\u30eb\u306f\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n<p class=\"codepen\" data-height=\"700\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"otwo\" data-slug-hash=\"jOEwxpr\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"jOEwxpr\"><span>See the Pen <a href=\"https:\/\/codepen.io\/otwo\/pen\/jOEwxpr\"><br \/>\njOEwxpr<\/a> by otwo (<a href=\"https:\/\/codepen.io\/otwo\">@otwo<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>\u30b5\u30f3\u30d7\u30eb\u306e\u3088\u3046\u306bCSS\u3067\u4f5c\u6210\u3057\u305f\u30b7\u30a7\u30a4\u30d7\u3092\u52d5\u304b\u3059\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u304c\u3001\u30b9\u30d7\u30e9\u30a4\u30c8\u753b\u50cf\u3092\u4f7f\u3046\u3053\u3068\u304c\u591a\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\nn\u56de\u6570\u304c\u5897\u3048\u308c\u3070\u5897\u3048\u308b\u307b\u3069\u6ed1\u3089\u304b\u306a\u52d5\u304d\u306b\u306a\u308a\u307e\u3059\u3002\uff08\u4f5c\u3063\u305f\u753b\u50cf\u306b\u3082\u3088\u308a\u307e\u3059\u304c\u2026\uff09<\/p>\n<h1 id=\"step3\">\u4f5c\u308a\u65b9<\/h1>\n<p>\u3067\u306f\u65e9\u901f\u4f5c\u3063\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<h2>\u30b9\u30d7\u30e9\u30a4\u30c8\u753b\u50cf\uff08\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u7528\uff09\u306e\u4f5c\u308a\u65b9<\/h2>\n<p>\u5148\u7a0b\u304a\u898b\u305b\u3057\u305f\u30c1\u30e3\u30ab\u304f\u3093\u3092\u4f8b\u306b\u4f5c\u308a\u307e\u3059\u3002<br \/>\n\u4eca\u56de\u306f\u6a2a\u9577\u3067\u4f5c\u6210\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u7e26\u9577\u3067\u3082\u69cb\u3044\u307e\u305b\u3093\u3002<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_01.jpg\" alt=\"\u2460 \uff11\u30b3\u30de\u306e\u7e26\u5e45\u3068\u3001\u6a2a\u5e45\u3092\u6c7a\u3081\u308b\u3002\u203b\u30b5\u30a4\u30ba\u304c\u5206\u304b\u308a\u3084\u3059\u3044\u3088\u3046\u306b\u80cc\u666f\u8272\u3064\u3051\u308b\" class=\"alignnone size-full wp-image-5159\" width=\"800\" height=\"482\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_01.jpg 800w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_01-150x90.jpg 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_01-300x181.jpg 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_01-768x463.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_02.jpg\" alt=\"\u2461 \u4f5c\u308a\u305f\u3044\u30b3\u30de\u6570 \u00d7 \u6a2a\u5e45\uff0879px\uff09\u3067\u6a2a\u5e45\u3092\u4f38\u3070\u3059\u3002\u203b\u30b3\u30de\u6570\u304c\u672a\u77e5\u306e\u5834\u5408\u9069\u5f53\u306b\u4f38\u3070\u3059\" class=\"alignnone size-full wp-image-5160\" width=\"800\" height=\"482\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_02.jpg 800w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_02-150x90.jpg 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_02-300x181.jpg 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_02-768x463.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_03.jpg\" alt=\"\u2462 \u6700\u521d\u306e\u30b3\u30de\u3092\u30b3\u30d4\u30da\u3002\u203b\u80cc\u666f\u8272\u306f\u540c\u3058\u8272\u3060\u3068\u308f\u304b\u308a\u306b\u304f\u3044\u306e\u3067\u8272\u5909\u3048\u308b\" class=\"alignnone size-full wp-image-5161\" width=\"800\" height=\"482\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_03.jpg 800w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_03-150x90.jpg 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_03-300x181.jpg 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_03-768x463.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_04.jpg\" alt=\"\u2463 \u5404\u30b3\u30de\u306b\u52d5\u304d\u3092\u3064\u3051\u308b\u3002\" class=\"alignnone size-full wp-image-5162\" width=\"800\" height=\"482\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_04.jpg 800w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_04-150x90.jpg 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_04-300x181.jpg 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_04-768x463.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_05.jpg\" alt=\"\u2464 \u80cc\u666f\u3092\u6d88\u3057\u3066\u66f8\u304d\u51fa\u3057\u3066\u5b8c\u4e86\uff01\u203b\u80cc\u666f\u3092\u9069\u5f53\u306b\u4f38\u3070\u3057\u305f\u5834\u5408\u306f\u3001\u30b3\u30de\u6570\u00d7\u6a2a\u5e45\u3067\u8a08\u7b97\u3057\u3066\u5408\u308f\u305b\u308b\" class=\"alignnone size-full wp-image-5163\" width=\"800\" height=\"482\" srcset=\"https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_05.jpg 800w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_05-150x90.jpg 150w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_05-300x181.jpg 300w, https:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_05-768x463.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u516820\u30b3\u30de \u00d7 79px\u3067\u5168\u95771580px\u306e\u753b\u50cf\u304c\u51fa\u6765\u4e0a\u304c\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>\u4e2d\u9014\u534a\u7aef\u306a79px\u3068121px\u2026<br \/>\n\u79c1\u306f\u8b0e\u306a\u6570\u5024\u3067\u4f5c\u3063\u3066\u3057\u307e\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u30ad\u30ea\u306e\u3044\u3044\u6570\u5b57\u306e\u307b\u3046\u304c\u4f5c\u308a\u3084\u3059\u3044\u3068\u601d\u3044\u307e\u3059\u78ba\u5b9f\u306b\u3002<\/p>\n<p>\u30b5\u30a4\u30ba\u306f\u3068\u3082\u304b\u304f\u3001<span class=\"yellow\">\uff11\u30b3\u30de\u306e\u6a2a\u5e45\uff08\u7e26\u5e45\uff09 \u00d7 \u30b3\u30de\u6570<\/span>\u3067\u899a\u3048\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n<span style=\"color: red;\">1px\u3067\u3082\u30ba\u30ec\u308b\u3068\u5909\u306a\u52d5\u304d\u306b\u306a\u308b<\/span>\u306e\u3067\u6c17\u3092\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2>css\u3067\u52d5\u304b\u3059<\/h2>\n<p>\u753b\u50cf\u304c\u51fa\u6765\u305f\u3089\u3001\u5b9f\u969b\u306bcss\u3067\u52d5\u304b\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u305d\u3082\u305d\u3082\u3067\u3059\u304c\u3001\u539f\u7406\u3068\u3057\u3066\u306f\u3053\u3046\u3044\u3046\u30a4\u30e1\u30fc\u30b8\u3067\u3059\u3002<br \/>\nbackground\u306e\u753b\u50cf\u3092\u3001\u901f\u3055\u3084\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u8abf\u6574\u3057\u3066\u52d5\u304b\u3059\u3002<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/flow_img_06.gif\" alt=\"\" class=\"alignnone size-full wp-image-5173\" width=\"800\" height=\"482\" \/><\/p>\n<p>\u8868\u793a\u9818\u57df\u4ee5\u5916\u306f\u30de\u30b9\u30af\u304c\u304b\u304b\u3063\u305f\u307f\u305f\u3044\u306a\u611f\u3058\u3002<br \/>\n\u305d\u306e\u305f\u3081\u3001\uff11\u3064\u3067\u3082\u30b5\u30a4\u30ba\u304c\u30ba\u30ec\u3066\u3044\u305f\u308a\u3059\u308b\u3068\u5c11\u3057\u305a\u3064\u30ba\u30ec\u3066\u5168\u3066\u304c\u5d29\u308c\u307e\u3059\u3002<\/p>\n<p>\u305d\u3057\u3066\u3001\u4ee5\u4e0b\u304c\u3053\u306e\u30c1\u30e3\u30ab\u304f\u3093\u306b\u4f7f\u3063\u3066\u3044\u308bhtml\u3068css\u3067\u3059\u3002<\/p>\n<p>\u25bchtml<\/p>\n<pre class=\"brush: python\r; notranslate\"><div class=\"chaka\"><\/div>\r\n<\/pre>\n<p>\u25bccss<\/p>\n<pre class=\"brush: python\r; notranslate\">.chaka{\r\n\twidth:79px;\r\n\theight:121px;\r\n\tbackground:url(\u4efb\u610f\u306e\u30d1\u30b9) no-repeat;\r\n\tanimation: fuwari 2.9s steps(20) infinite;\r\n}\r\n@keyframes fuwari {\r\n\tto{\r\n\t\tbackground-position: -1580px 0;\r\n\t}\r\n}\r\n@-webkit-keyframes fuwari {\r\n\tto{\r\n\t\tbackground-position: -1580px 0;\r\n\t}\r\n}\r\n@-moz-keyframes fuwari {\r\n\tto{\r\n\t\tbackground-position: -1580px 0;\r\n\t}\r\n}\r\n<\/pre>\n<p>html\u3068css\u306e\u5185\u5bb9\u3092\u7c21\u5358\u306b\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n<h3>width\u3001height<\/h3>\n<p>width\u306b\u6307\u5b9a\u3059\u308b\u306e\u306f\u3001<span class=\"yellow\">1\u30b3\u30de\u5206\u306e\u6a2a\u5e45<\/span>\u3002<br \/>\nheight\u306b\u6307\u5b9a\u3059\u308b\u306e\u306f\u3001<span class=\"yellow\">1\u30b3\u30de\u5206\u306e\u7e26\u5e45<\/span>\u3002<br \/>\n\u3068\u8a00\u3044\u305f\u3044\u3068\u3053\u308d\u3067\u3059\u304c\u3001\u4eca\u56de\u306f\u6a2a\u9577\u306e\u753b\u50cf\u306a\u306e\u3067height\u306f121px\u4ee5\u4e0a\u3067\u3042\u308c\u3070\u554f\u984c\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u9006\u306b<span style=\"color: red;\">\u7e26\u9577\u306e\u753b\u50cf\u306e\u5834\u5408\u306f\u3001height\u306f1\u30b3\u30de\u5206\u306e\u30b5\u30a4\u30ba<\/span>\u3058\u3083\u306a\u3044\u3068\u30ba\u30ec\u308b\u306e\u3067\u6c17\u3092\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\nwidth\u306f1\u30b3\u30de\u5206\u30b5\u30a4\u30ba\u4ee5\u4e0a\u3067\u3042\u308c\u3070\u554f\u984c\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<h3>animation<\/h3>\n<p>\u66f8\u304d\u65b9\u306f\u4e00\u62ec\u6307\u5b9a\uff08\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9\uff09\u3067\u8a18\u8f09\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u300cfuwari\u300d\u3068\u3044\u3046animation-name\u306b\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u4efb\u610f\u3067\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n\u300c2.9s\u300d\u306f\u3001\u4f55\u79d2\u9593\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u304b\uff08animation-duration\uff09\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u300csteps(20)\u300d\u306f\u3001<span class=\"yellow\">()\u5185\u306e\u6570\u5b57\u306e\u56de\u6570\u3060\u3051\u30b3\u30de\u9001\u308a<\/span>\u3057\u307e\u3059\uff08animation-timing-function\uff09\u3002\u4eca\u56de\u5168\u90e8\u306720\u30b3\u30de\u3060\u3063\u305f\u306e\u306720\u3002<br \/>\n\u300cinfinite\u300d\u306f\u3001\u518d\u751f\u56de\u6570\uff08animation-iteration-count\uff09\u3092\u6307\u5b9a\u3057\u3066\u304a\u308a\u3001\u4eca\u56de\u306f\u7121\u9650\u306b\u30ea\u30d4\u30fc\u30c8\u3055\u305b\u308b\u306e\u3067infinite\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>css\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u8a73\u3057\u3044\u5185\u5bb9\u306f\u4ee5\u4e0b\u3092\u53c2\u8003\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div class=\"externalLink\" style=\"margin: 0px;\"><a href=\"http:\/\/www.otwo.jp\/blog\/css_animation\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u3010\u4fdd\u5b58\u7248\u3011CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u7a2e\u985e\u30fb\u4f7f\u3044\u65b9\u30fb\u30b5\u30f3\u30d7\u30eb<\/a><\/div>\n<h3>background-position<\/h3>\n<p>backgroud\u3068\u3057\u3066\u80cc\u666f\u306b\u3057\u305f\u753b\u50cf\u3092\u3001X\u8ef8\u306e-1580px\u307e\u3067<span class=\"yellow\">\u8ca0\u306e\u65b9\u5411\u2190\uff08\u5de6\uff09<\/span>\u306b\u30b9\u30e9\u30a4\u30c9\u3055\u305b\u3066\u3044\u307e\u3059\u3002<br \/>\n<span class=\"yellow\">\u6b63\u306e\u65b9\u5411\u2192\uff08\u53f3\uff09<\/span>\u306b\u753b\u50cf\u3092\u52d5\u304b\u3059\u306a\u3089<span class=\"yellow\">\u6b63\u306e\u6570\u5b57<\/span>\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u307e\u305f\u3001\u7e26\u306b\u9577\u3044\u753b\u50cf\u306a\u3089background-position: 0px \u25cb\u25cb\u25cbpx\uff08\u307e\u305f\u306f-\u25cb\u25cb\u25cbpx\uff09\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u753b\u50cf\u306b\u5408\u308f\u305b\u3066background-position\u306epx\u3092\u6307\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<hr \/>\n<p>\u3069\u3046\u3067\u3057\u3087\u3046\u304b\u3002<br \/>\n\u3046\u307e\u304f\u4f5c\u308c\u307e\u3057\u305f\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<div class=\"maru2\"><\/div>\n<p>\u5225\u306e\u753b\u50cf\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u308a\u3059\u308b\u3068\u3001\u3053\u3046\u3044\u3046\u306e\u3082\u4f5c\u308c\u307e\u3059\u3002<\/p>\n<style>\n.area{\n     position:relative;\n}\n.maru{\n     position: absolute;\n     top:98px;\n     left:0px;\n     width:75px;\n     height:39px;\n     background:url(http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/cercle_yellow.png) no-repeat;\n     animation: maru 0.5s steps(9) infinite;\n}\n.maru2{\n     width:75px;\n     height:39px;\n     background:url(http:\/\/www.otwo.jp\/blog\/wp-content\/uploads\/2020\/01\/cercle_yellow.png) no-repeat;\n     animation: maru 0.5s steps(9) infinite;\n}\n@keyframes maru{\n     to{\n          background-position: -675px 0;\n     }\n}\n@-webkit-keyframes maru{\n     to{\n          background-position: -675px 0;\n     }\n}\n@-moz-keyframes maru{\n     to{\n          background-position: -675px 0;\n     }\n}\n<\/style>\n<div class=\"area\">\n<div class=\"chaka\"><\/div>\n<div class=\"maru\"><\/div>\n<\/div>\n<p>\u30b9\u30d7\u30e9\u30a4\u30c8\u753b\u50cf\u3092\u4f5c\u308b\u306e\u304c\u5c11\u3057\u624b\u9593\u3067\u3059\u304c\u3001CSS\u306e\u6307\u5b9a\u81ea\u4f53\u306f\u96e3\u3057\u304f\u306a\u3044\u306e\u3067\u305c\u3072\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff01<\/p>\n<p>\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\u3002 Web\u30c7\u30b6\u30a4\u30ca\u30fc\u306e\u5c71\u672c\u3067\u3059\u3002 \u4eca\u56de\u306fCSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3001animation-timing-function\u306esteps\u3068\u30b9\u30d7\u30e9\u30a4\u30c8\u753b\u50cf\u3092\u4f7f\u3063\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002 \u3082\u304f\u3058 \u30b9\u30d7\u30e9\u30a4\u30c8\u753b [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":5253,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[103],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/posts\/5087"}],"collection":[{"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/comments?post=5087"}],"version-history":[{"count":155,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/posts\/5087\/revisions"}],"predecessor-version":[{"id":5787,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/posts\/5087\/revisions\/5787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/media\/5253"}],"wp:attachment":[{"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/media?parent=5087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/categories?post=5087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.otwo.jp\/blog\/wp-json\/wp\/v2\/tags?post=5087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}