CINXE.COM

<!DOCTYPE html><html lang="ja" dir="ltr" data-capo=""><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes"> <title>CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう - ICS MEDIA</title> <script src="https://cdn.ampproject.org/v0.js" async></script> <script src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" async custom-element="amp-twitter"></script> <script src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js" async custom-element="amp-youtube"></script> <style>.ripple{overflow:hidden;position:relative}.ripple-effect{animation-name:ripple;background:#888;border-radius:50%;display:block;opacity:.2;pointer-events:none;position:absolute;transform:scale(0);-webkit-user-select:none;user-select:none;will-change:opacity,transform}.ripple[data-ripple=light] .ripple-effect{background:#fff!important}.ripple[data-ripple=dark] .ripple-effect{background:#000!important}@keyframes ripple{to{opacity:0;transform:scale(2)}}</style> <style>.btn{background-color:initial;border:1px solid #0000;border-radius:.25rem;color:#000;display:inline-block;font-size:1rem;font-weight:400;line-height:1.5;padding:.375rem .75rem;text-align:center;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-user-select:none;user-select:none}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn-group,.btn-group-vertical{display:inline-flex;position:relative;vertical-align:middle}button:focus{outline:5px auto var(--primary)}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child,.dropdown-toggle){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.btn-primary{background-color:var(--primary);color:#fff!important}@media (any-hover:hover){@supports (background-color:color-mix(in srgb,#000,#000)){.btn-primary:hover{background-color:color-mix(in srgb,var(--primary),#000 20%)}}}.btn-secondary{background-color:var(--color-btn-secondary)}@media (prefers-color-scheme:dark){.btn-secondary{color:var(--color-text-p)}}@media (any-hover:hover){@supports (background-color:color-mix(in srgb,#000,#000)){.btn-secondary:hover{background-color:color-mix(in srgb,var(--color-btn-secondary),#888 20%)}}}.btn-group-vertical>.btn,.btn-group>.btn{flex:1 1 auto;position:relative}.btn-primary:not(:disabled,.disabled).active:focus,.btn-primary:not(:disabled,.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.text-center{text-align:center!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.badge{accent-color:red;border-radius:.25rem;display:inline-block;font-size:75%;font-weight:700;line-height:1;padding:.25em .4em;text-align:center;transition:color .2s,background-color .2s,border-color .2s;vertical-align:initial;white-space:nowrap}.badge-pill{border-radius:10rem;padding-left:.6em;padding-right:.6em}.badge-light{background-color:var(--color-btn-secondary);color:var(--color-text-p)}.badge-primary{background-color:var(--primary);color:#fff}@media (prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important}}html{scroll-padding-top:32px;touch-action:manipulation}body{accent-color:var(--primary);line-break:strict;margin:0;overflow-wrap:anywhere;padding:0;word-break:normal}body ::selection{background-color:rgba(50,35,179,.251)}@media (prefers-color-scheme:dark){body ::selection{background-color:rgba(126,112,254,.251)}}img{vertical-align:bottom}a{color:inherit;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,.2)}@media (prefers-color-scheme:dark){a{-webkit-tap-highlight-color:rgba(255,255,255,.1)}}ul{padding:0}ul li{list-style:none}button{appearance:none;border:none;cursor:pointer}</style> <style>.language-glsl,.language-html,.language-js{background:var(--color-bg-code);color:#383a42;display:block;overflow-x:auto;padding:.5em}.hljs-comment,.hljs-quote{color:#666}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#813b32}.hljs-literal{color:#005c7d}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#2f612f}.hljs-built_in,.hljs-class .hljs-title{color:#733801}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#7f5901}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#3060bf}.hljs-strong{font-weight:700}.hljs-link{-webkit-text-decoration:underline;text-decoration:underline}</style> <style>@media (prefers-color-scheme:dark){.language-glsl,.language-html,.language-js{background:var(--color-bg-code);color:#abb2bf;display:block;overflow-x:auto;padding:.5em}.hljs-comment,.hljs-quote{color:#5c6370}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-strong{font-weight:700}.hljs-link{-webkit-text-decoration:underline;text-decoration:underline}}</style> <style>:root{--color-text-p:#404040;--color-text-p-secondary:#606060;--color-text-h:#202020;--color-bg:#eff2f5;--color-bg-code:#fff;--color-bg-footer:#f9f9f9;--color-bg-strong:#fff996;--color-bg-btn:#1976d2;--color-btn-secondary:#e0e0e0;--color-text-a:#1976d2;--color-text-a-hover:var(--primary);--color-text-a-visited:var(--color-text-a);--color-border:#0000001a;--primary:#3223b3;--font-sans:Helvetica Neue,Arial,Hiragino Sans,Hiragino Kaku Gothic ProN,BIZ UDPGothic,Meiryo,sans-serif;--font-mono:SFMono-Regular,Menlo,Consolas,Bitstream Vera Sans Mono,Courier New,Courier,BIZ UDGothic,Meiryo,monospace}@media (prefers-color-scheme:dark){:root{--color-text-p:#d0d0d0;--color-text-p-secondary:#a0a0a0;--color-text-h:#fff;--color-bg:#202020;--color-bg-code:#282c34;--color-bg-footer:#090909;--color-bg-strong:#7a0099;--color-text-a:#90caf9;--color-border:#d6d6d61a;--color-btn-secondary:#404040;--primary:#7e70fe}}@supports (-webkit-touch-callout:none) and (font:-apple-system-body){:root{font:-apple-system-body}}body{background-color:var(--color-bg);font-family:var(--font-sans)}iframe{border:none}.btn-primary{background-color:var(--primary);border-color:var(--primary);color:#fff}@media (min-width:768px){br.mobile{display:none}}@media (min-width:992px){br.tablet{display:none}}</style> <style>.ly-top-header[data-v-53af800e]{background-color:var(--color-bg);width:100%;z-index:1}@media print{.ly-top-header[data-v-53af800e]{position:static}}</style> <style>.mediaHeader[data-v-c016e82a]{border-bottom:1px solid var(--color-border);overflow:hidden;width:100%}.mediaHeader-row[data-v-c016e82a]{height:48px;margin:0 auto;max-width:960px;position:relative}@media (min-width:1200px){.mediaHeader-row[data-v-c016e82a]{max-width:1080px}}.mediaHeader-row h1[data-v-c016e82a]{left:50%;margin:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.mediaHeader-row-tool[data-v-c016e82a]{align-items:center;display:flex;position:absolute;right:0;top:50%;transform:translateY(-50%)}.mediaHeader-row-tool a[data-v-c016e82a]{border-radius:6px;box-sizing:initial;color:var(--color-text-p);display:block;height:32px;padding:3px;-webkit-text-decoration:none;text-decoration:none;transition:background .2s}@media (any-hover:hover){.mediaHeader-row-tool a[data-v-c016e82a]:hover{background:#8080804d}}.mediaHeader-row-tool a[data-v-c016e82a]:active{background:#80808080}.mediaHeader-row-tool svg[data-v-c016e82a]{background:#0000;fill:#333}@media (prefers-color-scheme:dark){.mediaHeader-row-tool svg[data-v-c016e82a]{fill:#ccc}}.mediaHeader-row-tool-item[data-v-c016e82a]{margin-left:.5rem}</style> <style>a[data-v-39193113]{align-items:center;background-image:url(/_nuxt/logo-website.Cz5k_taM.png);background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;height:48px;width:144px}span[data-v-39193113]{visibility:hidden}</style> <style>nav[data-v-5ddcd2fd]{width:100%}.category-list[data-v-5ddcd2fd]{display:flex;justify-content:space-between;margin:0 auto;max-width:960px}@media (min-width:1200px){.category-list[data-v-5ddcd2fd]{max-width:1080px}}@media (max-width:767.98px){.category-list[data-v-5ddcd2fd]{overflow:auto}.category-list[data-v-5ddcd2fd]::-webkit-scrollbar{height:2px}.category-list[data-v-5ddcd2fd]::-webkit-scrollbar-track{border-radius:0}.category-list[data-v-5ddcd2fd]::-webkit-scrollbar-thumb{background-color:#80808080}}.category-list-item[data-v-5ddcd2fd]{flex:1}.category-list-item a[data-v-5ddcd2fd]{color:var(--color-text-p);display:block;font-feature-settings:"palt";font-size:.75rem;font-weight:700;padding:.5rem 1rem;text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:color .2s,background .2s;-webkit-user-select:none;user-select:none;white-space:nowrap;word-break:keep-all}@media (any-hover:hover){.category-list-item a[data-v-5ddcd2fd]:hover{background:var(--primary);color:#fff}}.category-list-item a._current[data-v-5ddcd2fd],.category-list-item a[aria-current=page][data-v-5ddcd2fd]{background:var(--primary);color:#fff}@media (max-width:767.98px){.category-list-item a[data-v-5ddcd2fd]{font-size:.625rem;padding-left:.5rem;padding-right:.5rem}}</style> <style>.heroSpace[data-v-cb0dd5fc]{background:#000;height:256px;overflow:hidden;position:relative;width:100%}.heroSpace-title[data-v-cb0dd5fc]{align-items:center;color:#fff;display:flex;font-weight:400;height:100%;justify-content:center;position:absolute;text-align:center;width:100%}.heroSpace-title p[data-v-cb0dd5fc]{color:#fff;font-feature-settings:"palt";font-size:1rem;font-weight:400;letter-spacing:.01em;margin:0 auto 16px;max-width:1080px}@media (max-width:767.98px){.heroSpace-title p[data-v-cb0dd5fc]{padding-left:16px;padding-right:16px}}.heroSpace-title h1[data-v-cb0dd5fc]{font-feature-settings:"palt";font-size:2rem;font-weight:400;letter-spacing:2px;margin:0 auto;max-width:1080px}@media (max-width:767.98px){.heroSpace-title h1[data-v-cb0dd5fc]{font-size:1.5rem;padding-left:16px;padding-right:16px}}.heroSpace_padding[data-v-cb0dd5fc]{height:326px}@media (max-width:767.98px){.heroSpace_padding[data-v-cb0dd5fc]{height:212px}}.heroSpace_padding .heroSpace-title[data-v-cb0dd5fc]{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.heroSpace iframe[data-v-cb0dd5fc]{height:100%;position:absolute;width:100%}</style> <style>.wbr[data-v-92dd477a]{display:inline-block}</style> <style>.top_link[data-v-da421125]{margin-bottom:64px;text-align:center}.entry-column[data-v-da421125]{display:flex;margin:0 auto;max-width:960px;width:100%}</style> <style>.site_updater[data-v-63cb43db]{background:var(--color-bg-footer);bottom:0;margin-top:20px;position:sticky}.site_updater p[data-v-63cb43db]{margin:0;padding:10px 0;text-align:center}.site_info[data-v-63cb43db]{background:var(--color-bg-footer);color:var(--color-text-p);padding:32px 0}@media (max-width:1199.98px){.site_info[data-v-63cb43db]{padding:32px 16px}}.site_info-sections[data-v-63cb43db]{display:grid;gap:32px;grid-template-columns:repeat(3,1fr);margin:0 auto;max-width:960px;width:100%}@media (max-width:991.98px){.site_info-sections[data-v-63cb43db]{gap:16px}}@media (max-width:767.98px){.site_info-sections[data-v-63cb43db]{grid-template-columns:1fr}}@media (min-width:1200px){.site_info-sections[data-v-63cb43db]{max-width:1080px}}.site_info-sections_item h3[data-v-63cb43db]{color:var(--color-text-h);font-size:1.5rem;font-weight:400;line-height:1;margin-bottom:16px}.site_info-sections_item p[data-v-63cb43db]{color:var(--color-text-p-secondary);font-size:.75rem;line-height:1.75;text-align:justify}.site_info-sections_item ul[data-v-63cb43db]{list-style-position:inside;padding:0 0 0 1rem}.site_info-sections_item ul li[data-v-63cb43db]{font-size:.75rem;line-height:1.75;list-style:circle}.site_info-sections_item a[data-v-63cb43db]{color:var(--color-text-p-secondary);-webkit-text-decoration:none;text-decoration:none;transition:color .2s}@media (any-hover:hover){.site_info-sections_item a[data-v-63cb43db]:hover{color:var(--color-text-a-hover)}}</style> <style>.copyright[data-v-4b34f398]{font-size:1rem;margin-top:32px;text-align:center}@media (min-width:768px){.copyright br.mobile[data-v-4b34f398]{display:none}}.raw-pages[data-v-4b34f398]{display:flex;font-size:.875rem;gap:24px;justify-content:center;margin-bottom:16px;margin-top:16px}@media (max-width:767.98px){.raw-pages[data-v-4b34f398]{flex-direction:column;gap:4px}}.raw-pages a[data-v-4b34f398]{color:var(--color-text-p-secondary);transition:color .2s}@media (any-hover:hover){.raw-pages a[data-v-4b34f398]:hover{color:var(--color-text-a-hover)}}</style> <style>.eyecatch[data-v-921b35f7]{overflow:hidden;position:relative}.eyecatch .eyecatch-blur-container[data-v-921b35f7]{height:100%;overflow:hidden;position:absolute;width:100%}.eyecatch .eyecatch-blur[data-v-921b35f7]{background-size:cover;content:"";filter:brightness(1.25) blur(64px);height:150%;left:-25%;position:absolute;top:-25%;width:150%}@media (max-width:991.98px){.eyecatch .eyecatch-blur[data-v-921b35f7]{display:none}}.eyecatch-inner[data-v-921b35f7]{margin:0 auto;position:relative}@media (min-width:1200px){.eyecatch-inner[data-v-921b35f7]{max-width:1080px}}@media (min-width:992px) and (max-width:1199.98px){.eyecatch-inner[data-v-921b35f7]{max-width:960px}}.eyecatch-inner-img[data-v-921b35f7]{view-transition-name:var(--0e97d286);aspect-ratio:1280/512;contain:paint;height:auto;object-fit:cover;width:100%}@media (max-width:767.98px){.eyecatch-inner-img[data-v-921b35f7]{aspect-ratio:1280/720}}</style> <style>@media (min-width:992px){.entry[data-v-49d92408]{display:flex;flex-direction:row;gap:32px;margin:0 auto}}.entry-article[data-v-49d92408]{margin:0 auto;max-width:720px}@media (min-width:992px) and (max-width:1199.98px){.entry-article[data-v-49d92408]{width:640px}}.entry-sidebar[data-v-49d92408]{flex:1}@media (max-width:991.98px){.entry-sidebar[data-v-49d92408]{display:none}}</style> <style>@charset "UTF-8";.article-date{color:var(--color-text-p-secondary);font-size:.8rem;margin:1rem 0;text-align:center}@media (max-width:767.98px){.article-date{padding:0 1rem}}.article-date a{color:currentcolor;-webkit-text-decoration:none;text-decoration:none;transition:color .2s}@media (any-hover:hover){.article-date a:hover{color:var(--color-text-a-hover)}}.article-date .article-date-slash{margin-left:.25rem;margin-right:.25rem}.article-tag{display:flex;flex-wrap:wrap;gap:8px 4px;justify-content:center;list-style:none;padding:0}.article-tag li{display:inline-block}.article-tag a{border:1px solid var(--color-text-p);border-radius:6px;color:var(--color-text-p);font-size:.75rem;padding:.2em .5em;-webkit-text-decoration:none;text-decoration:none;transition:color .2s,border .2s}@media (any-hover:hover){.article-tag a:hover{border:1px solid var(--color-text-a-hover);color:var(--color-text-a-hover);-webkit-text-decoration:none;text-decoration:none}}.article{color:var(--color-text-p);font-size:1rem;line-break:strict;line-height:200%;overflow-wrap:anywhere;word-break:normal}.article h3{color:var(--color-text-h);font-family:var(--font-sans);font-feature-settings:"palt";font-size:2rem;font-weight:400;letter-spacing:.025em;line-height:1.25;margin-bottom:.5em;margin-top:3em}@media (max-width:767.98px){.article h3{font-size:1.5rem}}.article h3:after{background-color:var(--color-border);content:"";display:block;height:1px;margin-top:.25rem}.article h4,.article h5{color:var(--color-text-h);font-family:var(--font-sans);font-feature-settings:"palt";font-weight:400;letter-spacing:.025em;margin-bottom:1em;margin-top:2em}.article h4{font-size:1.5rem}.article h5{font-size:1.25rem}.article h1,.article h6{background:red;color:#000}.article h1:before,.article h6:before{content:"(この見出しレベルはサポートされてません)"}.article p{text-align:left;word-break:normal}.article p small{color:var(--color-text-p-secondary);font-size:.75em}.article p>a>img,.article p>img{height:auto;max-width:100%}@media (max-width:767.98px){.article p>a>img,.article p>img{margin-left:-1rem;margin-right:-1rem;max-width:none;width:100vw}.article p amp-youtube{margin-left:-1rem;margin-right:-1rem;max-width:100vw}}.article strong{background:linear-gradient(#0000 61%,var(--color-bg-strong) 0,var(--color-bg-strong) 0);font-weight:700}.article code{background-color:var(--color-bg-code);border-radius:.25rem;color:var(--color-text-p);font-family:var(--font-mono);padding:.2rem .4rem}@media (max-width:767.98px){.article{padding:0 1rem}}.article a{color:var(--color-text-a);-webkit-text-decoration:none;text-decoration:none}@media (any-hover:hover){.article a:hover{color:var(--color-text-a);-webkit-text-decoration:underline;text-decoration:underline}}.article a:visited{color:var(--color-text-a-visited)}.article a[target=_blank]:after{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMxOTc2ZDJ9PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTI0LjU1IDB2M2gxMC4zM0wxNC40NCAyMy40NGwyLjEyIDIuMTJMMzcgNS4xMnYxMC4zNGgzVjB6IiBjbGFzcz0iY2xzLTEiLz48cGF0aCBkPSJNMzAgMzdIM1YxMGgxMVY3SDB2MzNoMzNWMjZoLTN6IiBjbGFzcz0iY2xzLTEiLz48L3N2Zz4=");background-repeat:no-repeat;content:"";display:inline-block;height:.7rem;margin:0 .25rem;width:.7rem}.article ol,.article ul{padding-inline-start:32px}.article li{list-style:inherit}.article>section>iframe{aspect-ratio:16/9;height:auto;width:100%}@media (max-width:767.98px){.article>section>iframe{margin-left:-1rem;margin-right:-1rem;max-width:none;width:100vw}}.article kbd{background-color:var(--color-bg-code);border-radius:4px;color:inherit;font-family:var(--font-mono);padding:.2rem .4rem;white-space:nowrap}.article blockquote{background:var(--color-bg-code);border-radius:6px;color:var(--color-text-p);margin:0;padding:1em}.article blockquote p{margin:0}.article pre{color:var(--color-text-p);font-family:var(--font-mono);font-size:.9rem;line-height:150%;overflow:auto;word-break:break-all;word-wrap:break-word;background:var(--color-bg-code);border-radius:5px}@media (max-width:767.98px){.article pre{font-size:.8rem;margin-left:-1rem;margin-right:-1rem}}.article code.hljs,.article pre>code{box-sizing:border-box;display:block;padding:20px;position:relative}.article code.hljs:before{background:var(--color-text-p);color:var(--color-bg);display:inline;font-size:.5rem;left:20px;line-height:1.25;padding:0 1em;position:absolute;top:0;-webkit-user-select:none;user-select:none}.article code.hljs.language-javascript:before,.article code.hljs.language-js:before{content:"JS"}.article code.hljs.language-json:before{content:"JSON"}.article code.hljs.language-xml:before{content:"XML"}.article code.hljs.language-html:before{content:"HTML"}.article code.hljs.language-css:before{content:"CSS"}.article code.hljs.language-scss:before{content:"SCSS"}.article code.hljs.language-ts:before,.article code.hljs.language-typescript:before{content:"TypeScript"}.article code.hljs.language-actionscript:before{content:"ActionScript 3.0"}.article code.hljs.language-cs:before{content:"C#"}.article code.hljs.language-bash:before{content:"コマンドライン"}.article code.hljs.language-swift:before{content:"Swift"}.article code.hljs.language-glsl:before{content:"GLSL"}.article code.hljs.language-vue:before{content:"Vue"}.breadcrumb{margin:5rem auto 1rem;max-width:1080px}@media (max-width:1199.98px){.breadcrumb{margin:0 1rem}}.breadcrumb ul{display:block;font-size:.9rem;list-style:none;overflow:hidden;padding:0;width:100%}.breadcrumb li{display:inline;word-break:break-all}.breadcrumb li:before{content:"/";margin:0 .5rem}.breadcrumb li:first-child:before{content:none}.breadcrumb li a{color:var(--color-text-p);-webkit-text-decoration:none;text-decoration:none}.breadcrumb li a:visited{color:currentcolor}@media (any-hover:hover){.breadcrumb li a:hover{color:var(--color-text-a-hover)}}.wrap{overflow:hidden}@media (min-width:768px){.wrap{margin:0 auto;max-width:720px}}.wrap_960{margin:0 auto}@media (min-width:1200px){.wrap_960{max-width:1080px}}@media (min-width:992px) and (max-width:1199.98px){.wrap_960{max-width:960px}}footer #copyright{font-size:.75rem;text-align:center}hr{border-color:var(--color-text-p);border-style:inset;border-width:1px;display:block;margin-block:.5em;margin-inline:auto;opacity:.5;overflow:hidden;unicode-bidi:isolate}table{font-size:.9rem;line-height:1.5;width:100%;word-break:break-all}table td,table th{border-top:1px solid var(--color-border);padding:.5rem .25rem;vertical-align:top}table thead th{border-bottom:1px solid var(--color-border);vertical-align:bottom}</style> <style>h2.article_title[data-v-3469d367]{color:var(--color-text-h);font-family:var(--font-sans);font-feature-settings:"palt";font-size:2rem;font-weight:700;letter-spacing:.005em;line-height:1.5;margin-left:auto;margin-right:auto;max-width:720px;text-align:center}@media (max-width:767.98px){h2.article_title[data-v-3469d367]{font-size:5vw;padding:0 .25rem}}h2.article_title[data-v-3469d367] strong{background:none;font-size:1.5em;font-weight:700}h2.article_title[data-v-3469d367] small{font-size:.75em;font-weight:inherit}h2.article_title[data-v-3469d367] span.wbr{display:inline-block}</style> <style>@media (max-width:767.98px){.article-date-item[data-v-d384dd23]{display:inline-block}}</style> <style>.sns-share[data-v-694562d6]{display:flex;gap:8px;justify-content:center;margin:1rem 0;text-align:center}.sns-share-badge[data-v-694562d6]{display:inline-block;font-size:12px;font-weight:700;line-height:1;margin-top:3px;padding:3px 6px;-webkit-user-select:none;user-select:none}.sns-share-btn[data-v-694562d6]{border-radius:6px;display:block;height:44px;transition:background-color .2s;width:44px}.sns-share-btn._x[data-v-694562d6]{background-color:#000;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' viewBox='0 0 240 240'%3E%3Cpath fill='%23fff' d='m88.2 60.66 81.26 118.15h-18.04L70.16 60.66zm4.73-9H53.04l93.64 136.15h39.89zM132.54 109.25l49.7-57.59h-11.25l-43.44 50.33z'/%3E%3Cpath fill='%23fff' d='m105.36 127.72-52.32 60.62H64.3l46.05-53.36z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain}@media (any-hover:hover){.sns-share-btn._x[data-v-694562d6]:hover{background-color:#111}}.sns-share-btn._facebook[data-v-694562d6]{background-color:#32529f;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M212 197h-37v60h37v176h70V257h50l5-60h-55v-33c0-14 3-20 17-20h38V83h-49c-52 0-76 23-76 67z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain}@media (any-hover:hover){.sns-share-btn._facebook[data-v-694562d6]:hover{background-color:#2a4887}}.sns-share-btn._hatena[data-v-694562d6]{background-color:#00a4de;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%23fff' d='M278.2 258.1q-13.6-15.2-37.8-17c14.4-3.9 24.8-9.6 31.4-17.3s9.8-17.8 9.8-30.7A55 55 0 0 0 275 166a48.8 48.8 0 0 0-19.2-18.6c-7.3-4-16-6.9-26.2-8.6s-28.1-2.4-53.7-2.4h-62.3v227.2h64.2q38.7 0 55.8-2.6c11.4-1.8 20.9-4.8 28.6-8.9a52.5 52.5 0 0 0 21.9-21.4c5.1-9.2 7.7-19.9 7.7-32.1 0-16.9-4.5-30.4-13.6-40.5m-107-71.4h13.3q23.1 0 31 5.2c5.3 3.5 7.9 9.5 7.9 18s-2.9 14-8.5 17.4-16.1 5-31.4 5h-12.3zM224 317c-6.1 3.7-16.5 5.5-31.1 5.5h-21.7V273h22.6c15 0 25.4 1.9 30.9 5.7s8.4 10.4 8.4 20-3 14.7-9.2 18.4zm133.6-10.9a28.8 28.8 0 1 0 28.8 28.8 28.8 28.8 0 0 0-28.8-28.8m-25-169.7h50v151.52h-50z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain}@media (any-hover:hover){.sns-share-btn._hatena[data-v-694562d6]:hover{background-color:#0091c8}}</style> <style>.sidebar{position:sticky;top:32px}.sidebarList{background-color:var(--color-bg-content-static);border-radius:8px;font-size:.75rem;line-height:1.5;list-style:none;max-height:calc(100vh - 96px);overflow:auto;padding:16px;position:relative;--color-bg-content-static:#fff;--color-contents-shadow:#0003}@media (prefers-color-scheme:dark){.sidebarList{--color-bg-content-static:#303030;--color-contents-shadow:#0006}}.sidebarList:before{background-color:var(--color-border);content:"";height:calc(100% - 64px);position:absolute;top:32px;width:1px}.sidebarList_item{color:var(--color-text-p-secondary);font-weight:700;padding-left:16px;position:relative;word-break:auto-phrase}.sidebarList_item:before{background-color:var(--color-btn-secondary);border:3px solid var(--color-bg-content-static);border-radius:50%;content:"";height:6px;left:-5.5px;position:absolute;top:6px;transition:background-color .3s;width:6px}@media (any-hover:hover){.sidebarList_item:hover:before{background-color:var(--primary)}}.sidebarList_item>a{display:inline-block;padding:4px 0;position:relative;transition:color .3s;width:100%}.sidebarList_item__sub{font-size:.75rem;font-weight:400}.sidebarList_item__sub:before{height:4px;left:-4.5px;top:8px;width:4px}.sidebarList_item__sub>a{padding-left:1em}.sidebarList_item.is-active>a{color:var(--primary)}.sidebarList_item.is-active:before{background-color:var(--primary)}@media (any-hover:hover){.sidebarList_item>a:hover{color:var(--primary)}}</style> <style>.SnsButtons[data-v-b5cbd36c]{padding-bottom:32px;padding-top:32px}.SnsButtons-sns[data-v-b5cbd36c]{display:flex;flex-flow:row wrap;gap:16px;justify-content:center}.SnsButtons-head[data-v-b5cbd36c],.SnsButtons-top[data-v-b5cbd36c]{text-align:center}.btn-sm[data-v-b5cbd36c]{align-items:center;display:flex;font-size:.875rem;gap:8px;padding:.25rem .5rem}</style> <style>.author-info[data-v-9742c4dd]{display:flex;margin:32px auto;max-width:640px}@media (max-width:767.98px){.author-info[data-v-9742c4dd]{padding-left:16px;padding-right:16px}}.author-info .btn[data-v-9742c4dd]{border:1px solid #0000;border-radius:.25rem;cursor:pointer;display:inline-block;font-size:1rem;font-weight:400;line-height:1.25;padding:.5rem 1rem;text-align:center;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.author-info .btn[data-v-9742c4dd],.author-info .btn[data-v-9742c4dd]:active,.author-info .btn[data-v-9742c4dd]:hover{-webkit-text-decoration:none;text-decoration:none}.author-info .btn-x[data-v-9742c4dd]{align-items:center;display:inline-flex;font-size:.75rem;padding:.1em .25em .1em .1em}.author-info .btn-x svg[data-v-9742c4dd]{margin-right:.25rem}.author-avatar[data-v-9742c4dd]{margin-right:24px}.author-avatar img[data-v-9742c4dd]{border-radius:50%}.author-avatar._large img[data-v-9742c4dd]{height:128px;width:128px}.author-desc[data-v-9742c4dd]{line-height:1.75}.author-desc-name[data-v-9742c4dd]{color:var(--color-text-h);display:flex;font-size:1.25rem;margin:0}@media (min-width:768px){.author-desc-name[data-v-9742c4dd]{align-items:center;gap:16px}}@media (max-width:767.98px){.author-desc-name[data-v-9742c4dd]{flex-direction:column;gap:4px}}.author-desc-script[data-v-9742c4dd]{color:var(--color-text-p);font-size:.9rem}.author-desc-script[data-v-9742c4dd] a{color:var(--color-text-a)}@media (any-hover:hover){.author-desc-script[data-v-9742c4dd] a:hover{color:var(--color-text-a-hover)}}.author-desc-script[data-v-9742c4dd] a:visited{color:var(--color-text-a-visited)}.is-inview img[data-v-9742c4dd]{view-transition-name:var(--475ed944)}</style> <style>.banner-img[data-v-84d78e6a]{border-radius:6px;height:auto;width:100%}@media (max-width:767.98px){.banner-img[data-v-84d78e6a]{border-radius:0}}.banners ul[data-v-84d78e6a]{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);list-style:none;padding:0}@media (max-width:767.98px){.banners ul[data-v-84d78e6a]{grid-template-columns:repeat(1,1fr)}}@media (any-hover:hover){.banners a[data-v-84d78e6a]:hover{filter:brightness(1.2)}}</style> <style>.related[data-v-c7eaaedb]{margin:64px 0}.related-in[data-v-c7eaaedb]{margin:0 auto;max-width:960px}@media (min-width:1200px){.related-in[data-v-c7eaaedb]{max-width:1080px}}@media (max-width:1199.98px){.related-in[data-v-c7eaaedb]{padding:0 1rem}}.related-in-head[data-v-c7eaaedb]{color:var(--color-text-h);font-family:var(--font-sans);font-feature-settings:"palt";font-size:1.5rem;font-weight:400;text-align:center}.related-in-ul[data-v-c7eaaedb]{display:grid;gap:1rem;grid-template-columns:1fr 1fr 1fr 1fr;list-style:none;margin:0;padding:0}@media (max-width:767.98px){.related-in-ul[data-v-c7eaaedb]{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}}.related-in-ul-li-thumb[data-v-c7eaaedb]{border-radius:6px;margin:0 0 10px;position:relative;transition:all .2s}.related-in-ul-li-thumb-img[data-v-c7eaaedb]{border-radius:6px;height:auto;width:100%}.related-in-ul-li-thumb[data-v-c7eaaedb]:after{border:2px solid #0000;border-radius:6px;box-sizing:border-box;content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:border-color .2s;width:100%}.related-in-ul-li-title[data-v-c7eaaedb]{font-size:.9rem;line-height:1.5;text-align:left}.related-in-ul li a[data-v-c7eaaedb]{color:var(--color-text-p);display:block;-webkit-text-decoration:none;text-decoration:none}@supports (word-break:auto-phrase){.related-in-ul li a[data-v-c7eaaedb]{word-break:auto-phrase}}@media (any-hover:hover){.related-in-ul li a[data-v-c7eaaedb]:hover{color:var(--color-text-a-hover)}.related-in-ul li a:hover .related-in-ul-li-thumb[data-v-c7eaaedb]:after{border-color:var(--primary)}.related-in-ul li a:hover .related-in-ul-li-title[data-v-c7eaaedb]{-webkit-text-decoration:none;text-decoration:none}}</style> <style>.header-breadcrumb[data-v-b934bba3]{background:var(--color-bg);container-type:inline-size;top:0;width:100%;z-index:10}.header-breadcrumb__inner[data-v-b934bba3]{font-size:.75rem;margin:0 auto;max-width:960px}@container (1200px <= width){.header-breadcrumb__inner[data-v-b934bba3]{max-width:1080px}}@media (max-width:991.98px){.header-breadcrumb__inner[data-v-b934bba3]{padding-left:16px;padding-right:16px}}.header-breadcrumb__inner ul[data-v-b934bba3]{margin:0;overflow:hidden;padding:0;width:100%}.header-breadcrumb__inner ul li[data-v-b934bba3]{color:#ccc;display:inline;line-height:36px;margin-right:.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-breadcrumb__inner ul li a[data-v-b934bba3]{color:var(--color-text-p);line-height:inherit;-webkit-text-decoration:none;text-decoration:none;transition:all .3s}@media (any-hover:hover){.header-breadcrumb__inner ul li a[data-v-b934bba3]:hover{color:var(--color-text-a)}}.header-breadcrumb__inner ul li[data-v-b934bba3]:after{content:"/";margin-left:.5em}.header-breadcrumb__inner ul li[data-v-b934bba3]:last-child{margin-left:0}.header-breadcrumb__inner ul li[data-v-b934bba3]:last-child:after{content:""}.header-breadcrumb__inner ul li .date[data-v-b934bba3]{color:#888}.header-breadcrumb__inner nav[data-v-b934bba3]{line-height:36px;min-width:60px}@media (max-width:1199.98px){.header-breadcrumb__inner nav[data-v-b934bba3]{margin-right:10px}}</style> <link rel="stylesheet" href="/_nuxt/Logo.B08_Goey.css"> <link rel="stylesheet" href="/_nuxt/CopyrightFooter.QnetxqVn.css"> <link rel="stylesheet" href="/_nuxt/style.DVjyf-m9.css"> <link rel="stylesheet" href="/_nuxt/StaffItem.DNxbzzNe.css"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/BO3Z475_.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DnTd6_Xj.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DVSz8gjX.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/C-0LdZH-.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/nE6G2Gxl.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DyrHuGZd.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/BrDd-etF.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/CenQKpRr.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/3M2JxWNy.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/CJSCuD5P.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DXINm9ZB.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/C8gbhLzQ.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/dDIkWv_L.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/CDC-ftrr.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/C-Yk6U7k.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/DU2oTVfN.js"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/BTQRFAIC.js"> <link rel="dns-prefetch" href="https://ics-creative.github.io"> <link rel="prefetch" as="image" type="image/png" href="/_nuxt/logo-website.Cz5k_taM.png"> <meta name="referrer" content="unsafe-url"> <meta name="format-detection" content="telephone=no"> <meta name="author" content="株式会社ICS"> <meta name="color-scheme" content="light dark"> <meta name="theme-color" content="#eff2f5" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#202020" media="(prefers-color-scheme: dark)"> <meta name="apple-mobile-web-app-title" content="ICS MEDIA"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <link rel="icon" href="/_assets/icons/favicon.png"> <link rel="apple-touch-icon" href="/_assets/icons/apple-touch-icon.png"> <link rel="alternate" type="application/rss+xml" href="/feed/atom.xml"> <link rel="manifest" href="/_assets/manifest_static.json"> <link rel="author" href="http://www.hatena.ne.jp/ics-media/"> <meta name="description" content="offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。"> <meta property="article:author" content="https://www.facebook.com/icswebjp"> <meta property="fb:pages" content="1414915712086775"> <meta property="og:locale" content="ja_JP"> <meta property="og:type" content="website"> <meta property="og:title" content="CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう - ICS MEDIA"> <meta property="og:description" content="offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。"> <meta property="og:url" content="https://ics.media/entry/230327/"> <meta property="og:site_name" content="ICS MEDIA"> <meta property="og:image" content="https://ics.media/entry/230327/images/eyecatch.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:description" content="offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。"> <meta name="twitter:title" content="CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう - ICS MEDIA"> <meta name="twitter:image" content="https://ics.media/entry/230327/images/eyecatch.png"> <meta name="twitter:site" content="@icsweb"> <meta property="article:published_time" content="2023-03-30T00:00:00+09:00"> <meta property="article:modified_time" content="2024-11-22T00:00:00+09:00"> <meta property="og:updated_time" content="2024-11-22T00:00:00+09:00"> <meta name="date" content="2024-11-22T00:00:00+09:00"> <meta name="robots" content="max-image-preview:large"> <link rel="canonical" href="https://ics.media/entry/230327/"> <script type="application/ld+json">{"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://ics.media/entry/230327/"},"headline":"CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう","image":{"@type":"ImageObject","url":"/entry/230327/images/eyecatch.png","height":512,"width":1280},"datePublished":"2023-03-30","dateModified":"2024-11-22","author":{"@type":"Organization","name":"株式会社ICS"},"publisher":{"@type":"Organization","name":"株式会社ICS","logo":{"@type":"ImageObject","url":"/_assets/icons/apple-touch-icon.png","width":512,"height":512}},"description":""}</script> <script type="module" src="/_nuxt/BO3Z475_.js" crossorigin></script></head><body><div id="__nuxt"><div class="ly-top" data-v-53af800e><div class="ly-top-header" data-v-53af800e><div class="mediaHeader" data-v-53af800e data-v-c016e82a><div class="mediaHeader-row" data-v-c016e82a><h1 data-v-c016e82a><a href="/" class="" title="ICS MEDIA" data-v-c016e82a data-v-39193113>ICS MEDIA</a></h1><div class="mediaHeader-row-tool" data-v-c016e82a><a href="/entry/search/" class="" title="サイト内を検索する" data-v-c016e82a><svg width="32" height="32" viewBox="0 0 24 24" data-v-c016e82a><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" data-v-c016e82a></path><path d="M0 0h24v24H0z" fill="none" data-v-c016e82a></path></svg></a></div></div></div><nav class="category" categoryid data-v-53af800e data-v-5ddcd2fd><ul class="category-list" data-v-5ddcd2fd><li class="category-list-item" data-v-5ddcd2fd><a href="/entry/category/design/" class="" data-v-5ddcd2fd>UIデザイナー</a></li><li class="category-list-item" data-v-5ddcd2fd><a href="/entry/category/html5/" class="" data-v-5ddcd2fd>HTMLコーダー</a></li><li class="category-list-item" data-v-5ddcd2fd><a href="/entry/category/frontend/" class="" data-v-5ddcd2fd>フロントエンジニア</a></li><li class="category-list-item" data-v-5ddcd2fd><a href="/entry/category/creative/" class="" data-v-5ddcd2fd>クリエイティブコーダー</a></li><li class="category-list-item" data-v-5ddcd2fd><a href="/entry/category/3d/" class="" data-v-5ddcd2fd>3Dデベロッパー</a></li></ul></nav></div><div itemscope itemtype="http://schema.org/Article" style="display:none;" data-v-53af800e data-v-cb0dd5fc><div class="heroSpace_padding heroSpace" data-v-cb0dd5fc><iframe src="/_assets/top_hero/archives.html" width="100%" height="100%" tabindex="-1" aria-hidden="true" loading="lazy" data-v-cb0dd5fc></iframe><div class="heroSpace-title" data-v-cb0dd5fc><header data-v-cb0dd5fc><h1 itemprop="name" data-v-cb0dd5fc></h1></header></div></div></div><div data-v-da421125><div class="eyecatch" data-v-da421125 style="--0e97d286:eyecatch-230327;" data-v-921b35f7><div class="eyecatch-blur-container" data-v-921b35f7><img class="eyecatch-blur" fetchpriority="high" src="/entry/230327/images/eyecatch.png" width="1280" height="512" alt="" data-v-921b35f7></div><div class="eyecatch-inner" data-v-921b35f7><img src="/entry/230327/images/eyecatch.png" alt="" width="1280" height="512" class="eyecatch-inner-img" fetchpriority="high" data-v-921b35f7></div></div><main class="wrap_960" data-v-da421125 data-v-49d92408><article data-v-49d92408><h2 class="article_title" data-v-49d92408 data-v-3469d367>CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう</h2><div class="article-date" data-v-49d92408><meta itemProp="datePublished" content="2023-03-30" data-v-d384dd23><time itemProp="dateModified" dateTime="2024-11-22" title="2023年3月30日に公開" data-v-d384dd23>2024年11月22日</time> メンテナンス済み / <a href="/entry/staff/sawada/" class="article-date-item" data-v-49d92408>株式会社ICS 澤田悠</a></div><ul class="article-tag" data-v-49d92408><li data-v-49d92408><a href="/entry/tag/CSS/" class="" data-v-49d92408>CSS</a></li></ul><div class="sns-share" data-v-49d92408 data-v-694562d6><div data-v-694562d6><a href="https://twitter.com/intent/tweet?url=https://ics.media/entry/230327/&text=CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう - ICS MEDIA" class="sns-share-btn _x" target="_blank" title="X（旧Twitter）でシェア" data-v-694562d6></a>41</div><div data-v-694562d6><a class="sns-share-btn _hatena" href="https://b.hatena.ne.jp/entry/s/ics.media/entry/230327/" target="_blank" title="はてなブックマークでブックマーク" data-v-694562d6></a>115</div></div><div class="entry" data-v-49d92408><div class="entry-article article" data-v-49d92408><section data-v-49d92408><code>offset</code>プロパティは、パス上に要素を配置・移動させるCSSのプロパティです。<code>animation</code>プロパティや<code>transition</code>プロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。 SVGやJavaScriptは詳しくないけど、複雑そうな動きのアニメーションを作ってみたい方、<code>animation</code>プロパティなどのおさらいをしておきたい方にオススメの記事です。 <img srcset="/entry/230327/images/230327_demo.webp 960w" src="/entry/230327/images/230327_demo.webp" sizes="(max-width:720px) 100vw, 720px" width="960" height="540" alt="offsetプロパティの作例" loading="lazy"></img> <ul> <li><a href="https://ics-creative.github.io/230327_offset" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/230327_offset" target="_blank">ソースコードを確認する</a></li> </ul> <h3 id="offset%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%A8%E5%AF%BE%E5%BF%9C%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" tabindex="-1"><code>offset</code>プロパティと対応ブラウザについて</h3> <code>offset</code>プロパティは、任意のパス上に要素を配置・移動させる一括指定プロパティです。以下の5つのプロパティが指定可能です。プロパティの詳細については、MDNのドキュメントをご参照ください。 <ul> <li><code>offset-path</code>：要素を配置・移動させるためのパス。（<a href="https://developer.mozilla.org/ja/docs/Web/CSS/offset-path" target="_blank">MDN</a>）</li> <li><code>offset-distance</code>：<code>offset-path</code>上で要素を配置する位置。（<a href="https://developer.mozilla.org/ja/docs/Web/CSS/offset-distance" target="_blank">MDN</a>）</li> <li><code>offset-rotate</code>：<code>offset-path</code>に沿って配置された要素の向き・角度。（<a href="https://developer.mozilla.org/ja/docs/Web/CSS/offset-rotate" target="_blank">MDN</a>）</li> <li><code>offset-anchor</code>：<code>offset-path</code>に沿って配置・移動している要素の原点の位置。（<a href="https://developer.mozilla.org/ja/docs/Web/CSS/offset-anchor" target="_blank">MDN</a>）</li> <li><code>offset-position</code>：<code>offset-path</code>の初期位置。大半のブラウザが非対応。（<a href="https://developer.mozilla.org/ja/docs/Web/CSS/offset-position" target="_blank">MDN</a>）</li> </ul> <code>offset</code>プロパティは、Chrome 55（20216年12月）、Edge 79（2020年1月）、Safari 16.0（2022年9月）、Firefox 72（2020年1月）以上で利用できます。 <ul> <li>参照：<a href="https://caniuse.com/?search=offset" target="_blank">“offset” | Can I use…</a></li> </ul> <img srcset="/entry/230327/images/230327_table.png 1920w, /entry/230327/images/230327_table__960.png 960w" src="/entry/230327/images/230327_table.png" sizes="(max-width:720px) 100vw, 720px" width="1920" height="1080" alt="offsetプロパティが使えるブラウザの表" loading="lazy"></img> <h4 id="offset-path%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AB%E6%8C%87%E5%AE%9A%E3%81%A7%E3%81%8D%E3%82%8B%E9%96%A2%E6%95%B0%E3%81%A4%E3%81%84%E3%81%A6" tabindex="-1"><code>offset-path</code>プロパティに指定できる関数ついて</h4> 記事執筆当時の2023年3月時点では、ChromeやFirefoxでは<code>path()</code>関数のみフルサポートで、そのほかの<code>circle()</code> 関数などの<a href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes" target="_blank">CSS基本シェイプ</a>や、画像読み込み等で使用する<code>url()</code>関数などは動作しませんでした。 参考：<a href="https://codepen.io/team/css-tricks/pen/WZdKMq" target="_blank">motion-path values test - CodePen</a> そのため本記事では、<code>offset-path</code>プロパティの値に設定できるCSS関数のうち、すべてのブラウザで動作する<code>path()</code>関数を用いて、<code>offset</code>プロパティの基本的な使い方からアニメーションの作例までを紹介します。 2024年現在では、<code>circle()</code>関数や<code>url()</code>関数も各種ブラウザがサポートしています。 <ul> <li><a href="https://caniuse.com/mdn-css_properties_offset-path_url" target="_blank">url</a></li> </ul> <h3 id="offset%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" tabindex="-1"><code>offset</code>プロパティの使い方</h3> <h4 id="1.-%E5%8B%95%E3%81%8B%E3%81%97%E3%81%9F%E3%81%84%E8%A6%81%E7%B4%A0%E3%82%92%E7%94%A8%E6%84%8F" tabindex="-1">1. 動かしたい要素を用意</h4> 画像や文字、図形など動かす要素を用意します。 <pre><code class="hljs language-html"><div class="offsetElement"></div> </code></pre> <h4 id="2.%E8%A6%81%E7%B4%A0%E3%82%92%E9%85%8D%E7%BD%AE%E3%83%BB%E7%A7%BB%E5%8B%95%E3%81%95%E3%81%9B%E3%82%8B%E3%83%91%E3%82%B9%E3%82%92%E7%94%A8%E6%84%8F" tabindex="-1">2.要素を配置・移動させるパスを用意</h4> 続いて、要素を配置したり移動させるためのSVGのパスを用意します。SVGの基本的な特徴や作成方法については、記事<a href="https://ics.media/entry/15834/">『SVGで始めるマイクロインタラクション入門』</a> で紹介しています。今回のデモは自由度の高いベクター画像作成ソフトから書き出す方法を使ってパスを用意しました。 ▼用意した画像とパス <img srcset="/entry/230327/images/230327_element_path.png 1920w, /entry/230327/images/230327_element_path__960.png 960w" src="/entry/230327/images/230327_element_path.png" sizes="(max-width:720px) 100vw, 720px" width="1920" height="1080" alt="用意した要素とパス" loading="lazy"></img> 出力したSVG画像の<code><path></code>タグに記述されている<code>d</code>属性の値をコピーし、<code>offset-path</code>プロパティで指定する<code>path()</code>関数にペーストします。 <pre><code class="hljs language-svg"><svg xmlns="http://www.w3.org/2000/svg" width="560" height="240" viewBox="0 0 560 240">  <path d="m151.363,24.535c34.261,34.838-42.065,118.74,33.549,142.049,64.387,19.848,50.065-102.368,139.927-113.695,109.927-13.856,75.035,64.581,83.68,110.545,12.157,64.636,86.686,83.689,111.933,25.314,25.219-58.312-39.419-40.603-38.543-99.518.491-32.993-26.601-61.017-64.31-61.017-139.281,0-66.329,188.211-135.904,188.237-71.351.027-2.296-134.161-96.919-134.161-66.593,0-36.324,104.43-92.322,127.132-41.714,16.911-68.195-14.6-57.769-49.188,4.351-14.435,32.224-56.076,31.875-76.524-.944-55.405,52.701-82.118,84.803-59.173" fill="none" stroke="#156EF3" stroke-width="1"/> </svg> </code></pre> <pre><code class="hljs language-css">.offsetElement { /* ▼path()関数にペースト */ offset-path: path("m151.363,24.535c34.261,34.838-42.065,118.74,33.549,142.049,64.387,19.848,50.065-102.368,139.927-113.695,109.927-13.856,75.035,64.581,83.68,110.545,12.157,64.636,86.686,83.689,111.933,25.314,25.219-58.312-39.419-40.603-38.543-99.518.491-32.993-26.601-61.017-64.31-61.017-139.281,0-66.329,188.211-135.904,188.237-71.351.027-2.296-134.161-96.919-134.161-66.593,0-36.324,104.43-92.322,127.132-41.714,16.911-68.195-14.6-57.769-49.188,4.351-14.435,32.224-56.076,31.875-76.524-.944-55.405,52.701-82.118,84.803-59.173"); } </code></pre> <h4 id="3.offset-distance%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%84offset-rotate%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E7%AD%89%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%81%84%E6%84%9F%E3%81%98%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8B" tabindex="-1">3.<code>offset-distance</code>プロパティや<code>offset-rotate</code>プロパティ等を使っていい感じのアニメーションを作る</h4> パス上を始点から終点へと移動するアニメーションを作るため、アニメーション終わりのキーフレームに<code>offset-distance: 100%;</code>を指定したキーフレーム（<code>move</code>）を用意しました。イージングは<code>linear</code>を指定し、40秒で1周を無限（<code>infinite</code>）に行うようアニメーションを指定しています。 また、用意したGIF画像がパス上を横移動するような向きになってしまっていたので、<code>offset-rotate</code>を<code>90deg</code>に回転させて向きを調整し、<code>auto</code>でパスの方向にしたがって角度を変えるようにしています。 ▼CSS（一部省略しています） <pre><code class="hljs language-css">.offsetElement { offset-path: path("m151.363,24.535c34.261,34.838-42.065,118.74,33.549,142.049,64.387,19.848,50.065-102.368,139.927-113.695,109.927-13.856,75.035,64.581,83.68,110.545,12.157,64.636,86.686,83.689,111.933,25.314,25.219-58.312-39.419-40.603-38.543-99.518.491-32.993-26.601-61.017-64.31-61.017-139.281,0-66.329,188.211-135.904,188.237-71.351.027-2.296-134.161-96.919-134.161-66.593,0-36.324,104.43-92.322,127.132-41.714,16.911-68.195-14.6-57.769-49.188,4.351-14.435,32.224-56.076,31.875-76.524-.944-55.405,52.701-82.118,84.803-59.173"); offset-rotate: auto 90deg; animation: move 40s linear infinite; } @keyframes move { to { offset-distance: 100%; } } </code></pre> ▼<code>offset-distance</code>の値をアニメーションさせてメンダコを泳がせるデモ <iframe loading="lazy" width="960" height="540" sandbox="allow-scripts" src="https://ics-creative.github.io/230327_offset/sample.html"></iframe> <ul> <li><a href="https://ics-creative.github.io/230327_offset/sample.html" target="_blank">サンプルを別ウインドウで開く</a></li> <li><a href="https://github.com/ics-creative/230327_offset/blob/main/sample.html" target="_blank">ソースコードを確認する</a></li> </ul> <h4 id="%E6%B3%A8%E6%84%8F%EF%BC%9A%3Cpath%3E%E3%82%BF%E3%82%B0%E3%81%A7%E3%81%82%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8B" tabindex="-1">注意：<code><path></code>タグである必要がある</h4> ベクター画像作成ソフトから基本図形を使って用意したパスをそのまま書き出すと、<code><circle></code>タグや<code><polygon></code>タグなど図形を書くためのコードして出力されます。 前述の通り、現在すべてのブラウザで対応している<code>path()</code>関数として使うには、<code><path></code>タグとして用意しなければならないので、一工夫する必要があります。 <h4 id="tips%EF%BC%9A%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E5%9B%B3%E5%BD%A2%E3%82%92svg%E3%81%A7%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%97%E3%81%99%E3%82%8B%E9%9A%9B%E3%81%AB%E3%80%81%3Cpath%3E%E3%82%BF%E3%82%B0%E3%81%A8%E3%81%97%E3%81%A6%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%99%E6%96%B9%E6%B3%95%EF%BC%88illustrator%E3%82%92%E4%BD%BF%E7%94%A8%EF%BC%89" tabindex="-1">Tips：基本的な図形をSVGで書き出しする際に、<code><path></code>タグとして書き出す方法（illustratorを使用）</h4> <ol> <li>任意の基本図形を作成</li> <li>はさみツール（ショートカットキー：C）で一点をカットする</li> <li>通常と同じくSVGで書き出し</li> </ol> <img srcset="/entry/230327/images/230327_cut_tool.gif 1920w" src="/entry/230327/images/230327_cut_tool.gif" sizes="(max-width:720px) 100vw, 720px" width="1920" height="1080" alt="はさみツールで基本図形をのパスをカット" loading="lazy"></img> 上記は基本図形で作った正円ですが、はさみツールで一点をカットしたことで、<code><circle></code>タグではなく<code><path></code>タグとして書き出すことができました。 また、<code>path()</code>関数に記述したパスのサイズ・比率などは、SVGを手動で記述できる方を除き、後からCSSで楽に調整することはできません。実際に表示するサイズで用意しておくことをオススメします。 <img srcset="/entry/230327/images/230327_path_tag.png 1920w, /entry/230327/images/230327_path_tag__960.png 960w" src="/entry/230327/images/230327_path_tag.png" sizes="(max-width:720px) 100vw, 720px" width="1920" height="1080" alt="基本図形そのままとはさみツールでカットして書き出した際の比較" loading="lazy"></img> <h3 id="offset%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E4%BD%9C%E4%BE%8B%E3%81%AE%E7%B4%B9%E4%BB%8B" tabindex="-1"><code>offset</code>プロパティを使った作例の紹介</h3> ここからは、<code>offset</code>プロパティを使って遊んでみた作例の紹介をします。 <h4 id="%E9%81%8A%E5%9C%92%E5%9C%B0%E3%81%AE%E4%BD%9C%E4%BE%8B" tabindex="-1">遊園地の作例</h4> 中央の観覧車がゆっくりと回り、その背景でジェットコースターが走る作例です。観覧車の方には、ゴンドラをホバーするとゆらゆら揺れるアニメーションを追加しています。 <img srcset="/entry/230327/images/230327_ferris_wheel.webp 960w" src="/entry/230327/images/230327_ferris_wheel.webp" sizes="(max-width:720px) 100vw, 720px" width="960" height="540" alt="観覧車の作例" loading="lazy"></img> <ul> <li><a href="https://ics-creative.github.io/230327_offset/#park" target="_blank">サンプルを別ウインドウで開く</a></li> <li>ソースコードを確認する（<a href="https://github.com/ics-creative/230327_offset/blob/main/index.html#L17" target="_blank">HTML</a>、<a href="https://github.com/ics-creative/230327_offset/blob/main/style/offset.css#L8" target="_blank">CSS</a>）</li> </ul> ジェットコースターについては、前述のメンダコのアニメーションと作り方が同じなので省略しますが、観覧車についてはアニメーション作成にあたって、いくつかのポイントがあります。 <ol> <li><code>offset-path</code>プロパティに正円のパスを指定。<code>Z</code>コマンドを追加しパスを閉じる。</li> <li>ゴンドラの要素に<code>style="--index: 0;"</code>というようなカスタムプロパティ（CSS変数）を追加し、インデックスを振っていく。</li> <li>キーフレーム<code>rotate-gondola</code>の<code>from</code>で、各ゴンドラに振ったCSS変数<code>--index</code>の値に応じて、<code>offset-distance</code>を<code>0%</code>から<code>10%</code>ずつ加算して配置。</li> <li>キーフレーム<code>rotate-gondola</code>の<code>to</code>に、キーフレームの<code>from</code>で設定した<code>offset-distance</code>の値に<code>100%</code>を足して、<code>100%</code>を超えた値を指定。</li> <li><code>offset-rotate</code>プロパティに<code>0deg</code>を指定し、ゴンドラの向きを固定。</li> <li><code>offset-anchor</code>プロパティがすべてのブラウザでは対応していないので、<code>translate: 0 20px;</code>で位置を調整。</li> </ol> ポイント1つ目についての補足ですが、SVGを記述するコードに、<a href="https://svgwg.org/svg2-draft/paths.html#PathDataClosePathCommand" target="_blank"><code>Z</code>コマンド</a>（または小文字の<code>z</code>コマンド）というものがあります。SVGのパスは、座標に点を打つコマンド等を記述してパスを作っていきますが、<code>Z</code>・<code>z</code>コマンドは現在の点とパスの始点を結合させる役割をします。 ※ <code>Z</code>・<code>z</code>コマンドはパラメーターを持たないので、大文字でも小文字でも同じ効果があります。 パスを閉じた形にすると、<code>offset-distance</code>プロパティに<code>100％</code>を超えた値が指定できるため、今回は<code>d</code>属性の末尾の点に<code>Z</code>コマンドを追加することで、終点と始点を繋げてパスを閉じました。 また、遊び要素としてゴンドラをホバーすると揺れるようなアニメーションを追加しました。アニメーションを綺麗に見せるためゴンドラのSVG画像にラッパー要素（<code>div.gondola</code>）を追加し、ラッパー要素をアニメーションさせています。アニメーションの詳細については、<a href="https://github.com/ics-creative/230327_offset/blob/main/style/offset.css#L44-L81" target="_blank">ソースコード</a>をご覧ください。 ▼HTML（一部省略しています） <pre><code class="hljs language-html"><div class="ferrisWheel"> <div class="ferrisWheel_gondola" style="--index: 0;"> <div class="gondola"> <svg width="40" height="40" viewBox="0 0 40 40"> <use href="./images/amusementPark/ferriswheel_gondola.svg#gondola"/> </svg> </div> </div> <div class="ferrisWheel_gondola" style="--index: 1;"> <div class="gondola"> <svg width="40" height="40" viewBox="0 0 40 40"> <use href="./images/amusementPark/ferriswheel_gondola.svg#gondola"/> </svg> </div> </div>  <span class="ferrisWheel_wheel"></span> <span class="ferrisWheel_frame"></span> </div> </code></pre> ▼CSS（一部省略しています） <pre><code class="hljs language-css">.ferrisWheel_gondola { position: absolute; width: 40px; height: 40px; translate: 0 20px; /* offset-anchorプロパティが全ブラウザでは対応していないので、translateで位置を調整 */ fill: hsl(calc(15deg + var(--index) * 36deg), 100%, 80%); /* CSS変数(--index)の値に応じて色相をずらし、レインボーにする */ offset-path: path("M100,0 A100,100 0 1,1 100,200 A100,100 0 1,1 100,0 Z"); offset-rotate: 0deg; animation: rotate-gondola 40s linear infinite; } @keyframes rotate-gondola { from { offset-distance: calc(10% * var(--index)); /* 0% 10% 20% ... 90% */ } to { offset-distance: calc(100% + 10% * var(--index)); /* 100% 110% 120% ... 190% */ } } </code></pre> <h4 id="%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC%E4%BC%91%E6%86%A9%E3%81%AE%E4%BD%9C%E4%BE%8B" tabindex="-1">コーヒー休憩の作例</h4> コーヒーから湯気のように文字が立ち昇るアニメーションの作例です。 <img srcset="/entry/230327/images/230327_coffee.webp 960w" src="/entry/230327/images/230327_coffee.webp" sizes="(max-width:720px) 100vw, 720px" width="960" height="540" alt="文字を動かす作例" loading="lazy"></img> <ul> <li><a href="https://ics-creative.github.io/230327_offset/#coffee" target="_blank">サンプルを別ウインドウで開く</a></li> <li>ソースコードを確認する（<a href="https://github.com/ics-creative/230327_offset/blob/main/index.html#L111" target="_blank">HTML</a>、<a href="https://github.com/ics-creative/230327_offset/blob/main/style/style.scss#L1" target="_blank">SCSS</a>）</li> </ul> ※要素の数が多く、観覧車の作例のように1つずつCSS変数を追加するのが大変だったので、SCSS記法の<code>@for</code>を使用しています。コンパイル後のCSSファイルはこちらの<a href="https://github.com/ics-creative/230327_offset/blob/main/style/style.css#L2" target="_blank">サンプルソースコード</a>からご覧いただけます。 <code>offset-distance</code>で渦巻き状のパスを移動する動きに合わせて、透明度とスケールを変えることで湯気っぽさが出るようなアニメーションを作成しました。一文字ずつ<code></code>要素で文字を囲み、<code>animation-delay</code>を<code>0.1s</code>ずつずらした値を指定することで、文字が繋がって動いて見えるようにしています。 ▼HTML <pre><code class="hljs language-html"><div class="coffee"> <div class="coffee_text"> <span>L</span> <span>e</span> <span>t'</span> <span>s</span> <span></span> <span>T</span> <span>a</span> <span>k</span> <span>e</span> <span></span> <span>a</span> <span></span> <span>b</span> <span>r</span> <span>e</span> <span>a</span> <span>k</span> </div> <span class="coffee_cup"></span> </div> </code></pre> ▼SCSS（一部省略しています） <pre><code class="hljs language-scss">.coffee { position: relative; &_text { position: absolute; > span { position: absolute; display: block; font-size: 16px; offset-path: path("m61.498,27.295c9.366,9.437,4.071,22.205-6.929,23.205-10.006.91-19.834-7.567-19.834-23.475,0-13,12.942-24.525,31.834-24.525,18.704,0,25.174,19.976,25,32-.231,16.017-7.03,24.708-13,34-18.22,28.357-18.22,49.926-13,58"); opacity: 0; animation: move-text 3.2s linear infinite, distort-text 3.2s linear infinite; } @for $i from 1 through 17 { > span:nth-child(#{$i}) { animation-delay: $i * 0.1s; } } } @keyframes move-text { 0% { offset-distance: 100%; opacity: 0; } 10%, 90% { opacity: 1; } 100% { offset-distance: 0; opacity: 0; } } @keyframes distort-text { 45% { transform: scaleY(1); } 65% { transform: scaleY(1.8); } 85% { transform: scaleY(1); } 100% { transform: scaleY(0.5); } } } </code></pre> <h4 id="%E3%81%8A%E8%8A%B1%E3%81%AE%E4%BD%9C%E4%BE%8B" tabindex="-1">お花の作例</h4> お花がハート型のパス上で順番に咲くアニメーションの作例です。 <img srcset="/entry/230327/images/230327_flowers.webp 960w" src="/entry/230327/images/230327_flowers.webp" sizes="(max-width:720px) 100vw, 720px" width="960" height="540" alt="お花がアニメーションする作例" loading="lazy"></img> <ul> <li><a href="https://ics-creative.github.io/230327_offset/#flower" target="_blank">サンプルを別ウインドウで開く</a></li> <li>ソースコードを確認する（<a href="https://github.com/ics-creative/230327_offset/blob/main/index.html#L138" target="_blank">HTML</a>、<a href="https://github.com/ics-creative/230327_offset/blob/main/style/style.scss#L71" target="_blank">SCSS</a>）</li> </ul> ※要素の数が多く、観覧車の作例のように1つずつCSS変数を追加するのが大変だったので、SCSS記法の<code>@for</code>を使用しています。コンパイル後のCSSファイルはこちらの<a href="https://github.com/ics-creative/230327_offset/blob/main/style/style.css#L112" target="_blank">サンプルソースコード</a>からご覧いただけます。 <code>offset-distance</code>プロパティの値を一輪ずつずらして均等に配置し、<code>animation-delay</code>プロパティで一輪ごとに<code>0.05s</code>遅延させています。華やかさを演出するため、透明度やスケール、回転などのプロパティを変化させるアニメーションにしています。 ▼HTML（一部省略しています） <pre><code class="hljs language-html"><div class="flower"> <span class="flower_purple"></span> <span class="flower_sakura01"></span> <span class="flower_blue"></span>  </div> </code></pre> ▼SCSS（一部省略しています） <pre><code class="hljs language-scss">.flower { position: relative; > span { position: absolute; display: block; width: 40px; height: 40px; offset-path: path("m98.754,196.422c31.104,0,152.054-138.577,69.462-184.493-44.918-24.971-84.351,18.188-84.351,53.101,0,27.57,30.877,28.712,30.692,0-.225-34.917-42.448-84.809-87.857-52.101-75.397,54.309,44.425,183.493,72.053,183.493"); animation: bloom 1.5s ease-out infinite; @for $i from 1 through 30 { > span:nth-child(#{$i}) { offset-distance: 100% / 30 * $i; // 一輪ずつずらして均等に配置 animation-delay: $i * 0.05s; // 一輪ごとに0.05sずらしてアニメーション } } } } @keyframes bloom { 0% { opacity: 0; transform: scale(0) rotate(-180deg); } 30% { opacity: 1; transform: scale(1) rotate(0deg); } 70% { opacity: 1; transform: scale(1) rotate(20deg); } 100% { opacity: 0; transform: scale(0.5) rotate(180deg); } } </code></pre> <h4 id="%E3%81%8A%E3%81%B0%E3%81%91%E3%81%8C%E6%B5%AE%E9%81%8A%E3%81%99%E3%82%8B%E4%BD%9C%E4%BE%8B" tabindex="-1">おばけが浮遊する作例</h4> おばけが浮遊しながら移動し、パス上の右端・左端に来た時はフリップして方向転換する作例です。ホバーすると移動を止めブルブル震えます。 <img srcset="/entry/230327/images/230327_ghost.webp 960w" src="/entry/230327/images/230327_ghost.webp" sizes="(max-width:720px) 100vw, 720px" width="960" height="540" alt="おばけの作例" loading="lazy"></img> <ul> <li><a href="https://ics-creative.github.io/230327_offset/#ghost" target="_blank">サンプルを別ウインドウで開く</a></li> <li>ソースコードを確認する（<a href="https://github.com/ics-creative/230327_offset/blob/main/index.html#L176" target="_blank">HTML</a>、<a href="https://github.com/ics-creative/230327_offset/blob/main/style/offset.css#L144" target="_blank">CSS</a>)</li> </ul> <code>offset-distance</code>プロパティの値を<code>1%</code>ずつずらして、パス上の何％が左右の位置に当たるのか確認し、パス上で右側にきた時（作例は<code>16%</code>・<code>64%</code>）に、<code>transform: scaleX(-1);</code>で左右反転させます。そして、左側にきた時（<code>41%</code>・<code>88%</code>）に<code>transform: scaleX(1);</code>で画像の向きを元に戻してフリップする動きを作っています。 <img srcset="/entry/230327/images/230327_ghost_keyframes.png 1920w, /entry/230327/images/230327_ghost_keyframes__960.png 960w" src="/entry/230327/images/230327_ghost_keyframes.png" sizes="(max-width:720px) 100vw, 720px" width="1920" height="1080" alt="おばけのキーフレーム" loading="lazy"></img> おまけ要素として、ホバーした時に<code>animation-play-state</code>プロパティの値を<code>running</code>から<code>paused</code>に切り替えて、その場に留まる挙動や震える動作等も追加しています。 <h4 id="%E6%89%8B%E6%9B%B8%E3%81%8D%E6%96%87%E5%AD%97%E9%A2%A8%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AB%E3%83%9A%E3%83%B3%E3%82%92%E8%BF%BD%E5%BE%93%E3%81%95%E3%81%9B%E3%80%81%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B%E6%84%9F%E3%82%92%E6%A5%B5%E3%82%81%E3%81%9F%E4%BE%8B" tabindex="-1">手書き文字風アニメーションにペンを追従させ、書いている感を極めた例</h4> SVGのマスクを使って、文字が書かれているようなアニメーションの表現は人気ですが、そこに万年筆を追従させることで、さらに書いている感を極めた作例です。 <img srcset="/entry/230327/images/230327_letters.webp 1920w" src="/entry/230327/images/230327_letters.webp" sizes="(max-width:720px) 100vw, 720px" width="1920" height="1080" alt="手書き文字にペンを追従させたアニメーションの作例" loading="lazy"></img> <ul> <li><a href="https://ics-creative.github.io/230327_offset/#letters" target="_blank">サンプルを別ウインドウで開く</a></li> <li>ソースコードを確認する（<a href="https://github.com/ics-creative/230327_offset/blob/main/index.html#L193" target="_blank">HTML</a>、<a href="https://github.com/ics-creative/230327_offset/blob/main/style/offset.css#L314" target="_blank">CSS</a>、<a href="https://github.com/ics-creative/230327_offset/blob/main/script/index.js" target="_blank">JS</a>）</li> </ul> ※アニメーション開始タイミングの制御にJavaScriptを使用しています。 文字を順に表示していくための<code><mask></code>タグとしてのパスと、ペンを動かす軌道としてのパスに同じ値を指定し、同時にアニメーションさせることで実現しています。 参考：<a href="https://fuuno.net/ani/ani17/ani17.html" target="_blank">SVGアニメーション、mask要素で手書き風テキスト。 - フーノページ</a> ▼HTML（一部省略） <pre><code class="hljs language-html"><div class="letters" data-wrapper-id="letters"> <div class="letters_line"> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="270" viewBox="0 0 300 270"> <g id="letters-svg-text"> <path d="m50.281,83.372c-2.78,2.482-10.925,13.408-13.11,14.6-6.705,7.054-7.29,17.565-5.462,23.539,0,2.384,0,3.575,2.086,5.164,1.633,1.223,2.735,2.285,5.164,2.285,1.49-.1,2.88-.299,3.873-1.788,4.172-6.654,6.556-10.329,6.456-10.23,1.391-1.787,2.186-2.682,2.781-2.979v-.396c0-1.292-.795-1.192-.795-1.987,0-.298.1-.794.497-1.589,2.982-5.747,1.131-2.864,3.277-5.661,0-1.688,1.093-3.675,3.277-5.959,1.034-.565,2.315,1.607,3.179,1.49,1.174,3.032-3.996,3.991-3.774,6.853,0-.1.496-.596.596-.596,0,.397-.496,1.391-3.079,4.171-.659.675-.271.849-.496,2.186-.403,1.687-.309,5.769,0,6.356-.35,4.842.068,8.797,5.264,11.818,1.17-.291,1.794-.235,3.179.398,1.202.633,2.057.692,3.178.397,2.384-1.986,7.747-5.065,9.535-9.138,2.384-5.462,2.682-3.078,3.277-4.171.596-1.589,1.489-1.49,1.986-3.179.524-2.797,1.611-7.375,2.88-8.938,1.59-1.191,2.682-3.277,3.278-6.456.596-3.078,1.589-5.264,2.88-6.356,1.264,4.917-3.973,12.397-7.25,20.162,0,2.582-3.576,7.052-3.874,9.138-1.489,2.284-6.257,4.668-7.647,6.952-2.176,3.152-4.566,4.532-7.647,4.072-2.576,1.358-5.853-2.302-7.945-3.675-2.979-3.079-3.974-6.257-3.974-10.627l-1.291.496c-3.377,4.172-8.045,11.62-12.018,11.62-4.949-1.275-8.925-.78-9.832-8.441.287-.837-.083-1.588-.298-2.781-4.017-9.582,11.716-31.741,14.004-31.782,5.661-6.158,10.727-11.024,10.727-11.024,0-.695,3.078-3.675,3.575-4.966.565-1.368-1.995-.171-2.384-.795-6.654,5.065-16.884,12.315-30.491,21.95-1.032.759-2.059-.89-2.682-1.49,0-.1.695-.993,1.888-2.582,1.89,1.095,3.372-2.499,5.164-1.391,2.548-3.39,13.391-7.203,15.594-11.322,1.688-.497,3.178-1.688,4.469-3.278,2.979-2.284,7.449-5.661,13.508-10.13.442-.082,2.756-.379,3.079.894.423,3.037.202,5.691-14.601,19.169Zm42.906,2.185c.795-2.284,2.086-3.873,3.774-4.668-1.919,1.819-3.785,8.952-5.165,10.727l-.397-.496,1.788-5.562Zm6.158-10.527l.396.496c-.496,1.192-1.39,2.682-2.78,4.37-.582-1.47,2.722-3.407,2.384-4.866Zm4.767-8.542l.397.397-1.887,1.688,1.489-2.086Zm3.675-7.052c1.405,1.1-.655,2.997-1.191,4.072-.777,1.118-.981,1.205-1.788.199.397-.993,1.391-2.384,2.979-4.271Zm2.881-4.866c.609.643.408,1.712.099,2.682l-.993.993-1.092-.894,1.986-2.781Zm2.88-2.682c-1.457-.956,1.503-3.19,1.986-3.675,1.398.63-1.53,3.057-1.986,3.675ZM170.955,5.108c1.82,1.518,1.67,2.976,1.284,4.966-.85,2.094-.313,7.699-2.59,9.436-2.487,10.873-11.605,21.667-17.877,31.769-16.402,16.501-17.78,20.55-32.875,27.213-.842,2.702-2.772,1.095-4.568.993-2.488-.388-1.673-2.221-.298-3.773,1.479-.753,4.004,1.193,5.264-.298,3.229.141,4.315-.393,5.562-2.881,1.566,1.447,3.322-1.388,4.569-1.787,1.937-2.7,11.859-8.957,13.904-12.713-.235-.752-.069-1.372.298-2.186l1.093,1.093c8.84-8.643,15.851-24.597,22.446-36.238.397-3.476,1.894-7.35,2.291-11.62-1.241-.509-.136-4.725-2.277-4.469-2.46-.528-5.584-.816-7.151.894-1.857-.31-5.519,3.01-7.25,2.979-3.832,2.771-16.55,15.432-18.871,17.281l-.397-.596c-.676.618-.112,3.969-1.887,3.873l-.596-.596c1.231-3.558,11.137-12.239,12.713-14.6,1.839-.794,9.833-8.749,13.011-8.642.395-3.462,7.023-2.526,8.243-4.071.626.825,1.591,1.159,2.583.894l3.377,3.079Zm-54.526,42.509c-.882-2.419,5.175-6.151,4.866-8.244.884-2.4,7.602-7.845,8.74-9.832l.496.496c-4.37,4.867-6.952,8.442-7.647,10.926-.776,1.934-5.526,4.771-6.455,6.654Z"/>  </g> <mask id="letters-svg-mask">  <path d="m2.348,80.572s13.419,12.98,21.14,11.079c11.174-2.751,31.536-24.701,38.025-25.239,6.389-.53-21.385,25.693-24.459,29.718-5.413,7.09-11.605,25.283-4.55,31.493,7.863,6.923,13.393-.655,24.769-25.374,5.379-11.687-4.068,10.878-3.945,16.587.122,5.676,1.673,14.786,13.121,13.366,13.775-1.709,27.472-54.096,41.337-72.768C119.974,43.023,148.869,1.639,164.589,3.026c13.958,1.232.197,23.508-1.461,26.479-3.816,6.839-18.161,39.068-46.781,47.618-20.951,6.259-24.626,35.136-24.711,36.652-.236,4.194,10.144,9.91,24.458-1.367,7.269-5.726-15.819-2.254-28.611,11.33-5.506,5.846,2.134,14.338,22.023,5.488,8.209-3.652,13.658-17.127,22.108-34.831,8.083-16.934,16.413-30.211,25.093-42.971,8.832-12.984,11.515-19.457,14.518-17.214,1.995,1.49-1.672,6.158-4.269,11.16-14.194,27.343-50.166,83.811-49.027,85.52,1.501,2.251,23.432-36.26,32.686-36.26s14.804,15.181,7.831,19.498c-.859.531.69-4.121-3.254-5.512-4.446-1.568-15.376,3.873-19.058,10.17-4.582,7.836,1.464,17.941,16.606,10.476,5.443-2.683,7.921-8.839,11.257-13.964,5.06-7.774,10.053-14.656,14.253-15.158,4.712-.563,6.287,6.287,6.287,6.287,0,0-6.17.676-11.059,5.378-7.294,7.016-14.107,18.556-6.59,19.339,10.68,1.112,26.25-15.425,19.163-24.49-3.502-4.48,19.11.016,19.11.016,0,0-15.172,22.934-13.202,21.95,7.36-3.68,22.652-16.087,27.364-18.532,3.843-1.994-8.655,18.608-8.655,18.608,0,0,24.492-19.558,28.995-18.558,2.483.552-7.782,13.937-17.175,36.307-7.761,18.484-17.071,46.77-18.527,55.455-4.023,23.99-1.911,60.906,17.765,61.991,15.992.882,21.799-8.424,33.696-21.683,16.131-17.979-26.232-116.275-15.112-123.496,1.019-.662,3.398,1.227,5.684.955,6.86-.816,16.662-2.504,19.182-6.277,4.198-6.286-7.162-6.324-13.13-3.134-9.205,4.921-14.85,16.586-2.918,20.99,9.58,3.536,44.874-28.294,44.874-28.294" fill="none" stroke="white" stroke-width="5.5"/> </mask> </svg> </div> <span class="letters_pen"></span> </div> </code></pre> ▼CSS（一部省略） <pre><code class="hljs language-css">.letters_pen { position: absolute; display: block; width: 140px; height: 140px; translate: 50% -50%; /* ペン先を文字に合わせる */ /* 🌟SVGの<mask>に指定するパスと同じ値です🌟 */ offset-path: path("m2.348,80.572s13.419,12.98,21.14,11.079c11.174-2.751,31.536-24.701,38.025-25.239,6.389-.53-21.385,25.693-24.459,29.718-5.413,7.09-11.605,25.283-4.55,31.493,7.863,6.923,13.393-.655,24.769-25.374,5.379-11.687-4.068,10.878-3.945,16.587.122,5.676,1.673,14.786,13.121,13.366,13.775-1.709,27.472-54.096,41.337-72.768C119.974,43.023,148.869,1.639,164.589,3.026c13.958,1.232,3.197,23.508,1.539,26.479-3.816,6.839-18.976,43.678-49.781,50.618-21.331,4.806-24.626,32.136-24.711,33.652-.236,4.194,10.144,9.91,24.458-1.367,7.269-5.726-15.819-2.254-28.611,11.33-5.506,5.846,2.166,14.859,22.055,6.01,8.209-3.652,10.733-19.208,20.994-35.927,16.136-26.291,41.535-63.148,44.543-63.683,2.451-.436-2.686,4.953-7.278,13.516-14.464,26.973-50.589,84.537-49.449,86.245,1.501,2.251,23.012-35.269,32.267-35.269s14.804,15.181,7.831,19.498c-.859.531.69-4.121-3.254-5.512-4.446-1.568-14.315,3.266-17.997,9.563-4.582,7.836,1.063,19.99,15.483,10.283,16.427-11.057,18.603-27.489,25.571-28.322,4.712-.563,6.287,6.287,6.287,6.287,0,0-6.17.676-11.059,5.378-7.294,7.016-14.107,18.556-6.59,19.339,10.68,1.112,26.25-15.425,19.163-24.49-3.502-4.48,19.11.016,19.11.016,0,0-15.172,22.934-13.202,21.95,7.36-3.68,22.652-16.087,27.364-18.532,3.843-1.994-8.655,18.608-8.655,18.608,0,0,24.492-19.558,28.995-18.558,2.483.552-7.782,13.937-17.175,36.307-7.761,18.484-17.071,46.77-18.527,55.455-4.023,23.99-1.911,60.906,17.765,61.991,15.992.882,21.799-8.424,33.696-21.683,16.131-17.979-26.993-113.133-15.873-120.355,4.078-2.648,22.063-3.576,25.628-8.464,5.299-7.265-7.086-6.176-13.13-3.134-8.208,4.131-16.046,20.071-1.059,20.888,13.104.714,43.015-28.192,43.015-28.192"); offset-rotate: 0deg; } </code></pre> <h3 id="%E3%81%BE%E3%81%A8%E3%82%81" tabindex="-1">まとめ</h3> CSSの<code>offset</code>プロパティを使って、要素がパス上を動く一見複雑そうなアニメーションを簡単に作ることができました。必要に応じてSVGの学習を深掘りするのも良いでしょうし、JavaScriptと組み合わせてより複雑なアニメーションに挑戦するのも作りがいがありそうです。<code>offset</code>プロパティを取り入れて、一味違うコンテンツを作るのはいかがでしょうか。 <h4 id="%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88" tabindex="-1">参考サイト</h4> <ul> <li><a href="https://drafts.fxtf.org/motion/#motion-paths-overview" target="_blank">Motion Path Module Level 1 - W3C</a></li> <li><a href="https://www.webdesignleaves.com/pr/html/svg_basic.html#path" target="_blank">HTML SVG の基本的な使い方（SVG入門） - Web Design Leaves</a></li> </ul> </section> ※この記事が公開されたのは1年前ですが、4か月前の2024年11月に内容をメンテナンスしています。 </div><div class="entry-sidebar" data-v-49d92408><div class="sidebar" data-v-49d92408><ol class="sidebarList"><li class="sidebarList_item"><a href="#top">冒頭</a></li><li data-index="0" class="sidebarList_item"><a href="#offset%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%A8%E5%AF%BE%E5%BF%9C%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">offsetプロパティと対応ブラウザについて</a></li><li data-index="1" class="sidebarList_item sidebarList_item__sub"><a href="#offset-path%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AB%E6%8C%87%E5%AE%9A%E3%81%A7%E3%81%8D%E3%82%8B%E9%96%A2%E6%95%B0%E3%81%A4%E3%81%84%E3%81%A6">offset-pathプロパティに指定できる関数ついて</a></li><li data-index="2" class="sidebarList_item"><a href="#offset%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9">offsetプロパティの使い方</a></li><li data-index="3" class="sidebarList_item sidebarList_item__sub"><a href="#1.-%E5%8B%95%E3%81%8B%E3%81%97%E3%81%9F%E3%81%84%E8%A6%81%E7%B4%A0%E3%82%92%E7%94%A8%E6%84%8F">1. 動かしたい要素を用意</a></li><li data-index="4" class="sidebarList_item sidebarList_item__sub"><a href="#2.%E8%A6%81%E7%B4%A0%E3%82%92%E9%85%8D%E7%BD%AE%E3%83%BB%E7%A7%BB%E5%8B%95%E3%81%95%E3%81%9B%E3%82%8B%E3%83%91%E3%82%B9%E3%82%92%E7%94%A8%E6%84%8F">2.要素を配置・移動させるパスを用意</a></li><li data-index="5" class="sidebarList_item sidebarList_item__sub"><a href="#3.offset-distance%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%84offset-rotate%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E7%AD%89%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%81%84%E6%84%9F%E3%81%98%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8B">3.offset-distanceプロパティやoffset-rotateプロパティ等を使っていい感じのアニメーションを作る</a></li><li data-index="6" class="sidebarList_item sidebarList_item__sub"><a href="#%E6%B3%A8%E6%84%8F%EF%BC%9A%3Cpath%3E%E3%82%BF%E3%82%B0%E3%81%A7%E3%81%82%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8B">注意：<path>タグである必要がある</a></li><li data-index="7" class="sidebarList_item sidebarList_item__sub"><a href="#tips%EF%BC%9A%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E5%9B%B3%E5%BD%A2%E3%82%92svg%E3%81%A7%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%97%E3%81%99%E3%82%8B%E9%9A%9B%E3%81%AB%E3%80%81%3Cpath%3E%E3%82%BF%E3%82%B0%E3%81%A8%E3%81%97%E3%81%A6%E6%9B%B8%E3%81%8D%E5%87%BA%E3%81%99%E6%96%B9%E6%B3%95%EF%BC%88illustrator%E3%82%92%E4%BD%BF%E7%94%A8%EF%BC%89">Tips：基本的な図形をSVGで書き出しする際に、<path>タグとして書き出す方法（illustratorを使用）</a></li><li data-index="8" class="sidebarList_item"><a href="#offset%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E4%BD%9C%E4%BE%8B%E3%81%AE%E7%B4%B9%E4%BB%8B">offsetプロパティを使った作例の紹介</a></li><li data-index="9" class="sidebarList_item sidebarList_item__sub"><a href="#%E9%81%8A%E5%9C%92%E5%9C%B0%E3%81%AE%E4%BD%9C%E4%BE%8B">遊園地の作例</a></li><li data-index="10" class="sidebarList_item sidebarList_item__sub"><a href="#%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC%E4%BC%91%E6%86%A9%E3%81%AE%E4%BD%9C%E4%BE%8B">コーヒー休憩の作例</a></li><li data-index="11" class="sidebarList_item sidebarList_item__sub"><a href="#%E3%81%8A%E8%8A%B1%E3%81%AE%E4%BD%9C%E4%BE%8B">お花の作例</a></li><li data-index="12" class="sidebarList_item sidebarList_item__sub"><a href="#%E3%81%8A%E3%81%B0%E3%81%91%E3%81%8C%E6%B5%AE%E9%81%8A%E3%81%99%E3%82%8B%E4%BD%9C%E4%BE%8B">おばけが浮遊する作例</a></li><li data-index="13" class="sidebarList_item sidebarList_item__sub"><a href="#%E6%89%8B%E6%9B%B8%E3%81%8D%E6%96%87%E5%AD%97%E9%A2%A8%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AB%E3%83%9A%E3%83%B3%E3%82%92%E8%BF%BD%E5%BE%93%E3%81%95%E3%81%9B%E3%80%81%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B%E6%84%9F%E3%82%92%E6%A5%B5%E3%82%81%E3%81%9F%E4%BE%8B">手書き文字風アニメーションにペンを追従させ、書いている感を極めた例</a></li><li data-index="14" class="sidebarList_item"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></li><li data-index="15" class="sidebarList_item sidebarList_item__sub"><a href="#%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88">参考サイト</a></li></ol></div></div></div></article></main><div class="wrap_960" data-v-da421125><div class="SnsButtons" data-v-da421125 data-v-b5cbd36c>\ SNSでシェアしよう /<div class="SnsButtons-sns" data-v-b5cbd36c><a href="https://twitter.com/intent/tweet?url=https://ics.media/entry/230327/&text=CSS%E3%81%AEoffset%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%A7%E3%80%81%E6%A5%BD%E3%81%97%E3%81%84%E3%83%91%E3%82%B9%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8D%E3%81%86%20-%20ICS%20MEDIA" target="_blank" class="btn btn-secondary btn-sm share-x" data-v-b5cbd36c>X（旧Twitter）でポストする</a><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/230327/" target="_blank" class="btn btn-secondary btn-sm share-facebook" data-v-b5cbd36c>はてなブックマーク</a></div></div><div class="author-info" data-v-da421125 style="--475ed944:staff-sawada;" data-v-9742c4dd><div class="author-avatar" data-v-9742c4dd><img src="/_assets/top/staff/ics-staff-sawada.jpg" width="64" height="64" alt="" loading="lazy" data-v-9742c4dd></div><div class="author-desc" data-v-9742c4dd><div class="author-desc-name" data-v-9742c4dd><div data-v-9742c4dd>澤田悠</div><div data-v-9742c4dd></div></div>フロントエンドエンジニア。大学はデザイン専攻だったもののコードから作りたくてICSへ。趣味は、お絵描き・CG・美術館巡りです。<a href="/entry/staff/sawada/" class="btn btn-secondary" data-v-9742c4dd> この担当の記事一覧 </a></div></div></div><aside class="wrap_960 banners" data-v-da421125 data-v-84d78e6a><ul data-v-84d78e6a><li data-v-84d78e6a><a href="/entry/231120/" data-v-84d78e6a><img width="1200" height="640" class="banner-img" alt="バナー：フロントエンドの知識地図" src="/_assets/top/231120_book_banner.jpg" loading="lazy" data-v-84d78e6a></a></li><li data-v-84d78e6a><a href="https://ics-web.jp/recruit/" data-v-84d78e6a><img width="1200" height="640" class="banner-img" alt="バナー：株式会社ICS 採用サイト" src="/_assets/top/190207_recruit_banner.jpg" loading="lazy" data-v-84d78e6a></a></li></ul></aside><aside class="related" data-v-da421125 data-v-c7eaaedb><div class="related-in" data-v-c7eaaedb><h3 class="related-in-head" data-v-c7eaaedb>よく一緒に読まれている記事</h3><ul class="related-in-ul" data-v-c7eaaedb><li data-v-c7eaaedb><a href="/entry/15834/" class="" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/15834/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb>SVGで始めるマイクロインタラクション入門</a></li><li data-v-c7eaaedb><a href="/entry/15970/" class="" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/15970/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb>SVGアニメーションの作り方まとめ</a></li><li data-v-c7eaaedb><a href="/entry/230119/" class="" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/230119/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb>制作事例：Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ</a></li><li data-v-c7eaaedb><a href="/entry/11336/" class="" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/11336/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb>CSSアニメーションだけで実現するキャラクターの動かし方</a></li><li data-v-c7eaaedb><a href="/entry/230309/" class="" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/230309/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb>独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！</a></li><li data-v-c7eaaedb><a href="/entry/230126/" class="" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/230126/images/eyecatch__480.jpg" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb>CSSの三角関数を理解しよう！ sin()とcos()でできる表現</a></li><li data-v-c7eaaedb><a href="/entry/210311/" class="" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/210311/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb>もう誤魔化さない！　CSS Transform完全入門(2D編)</a></li><li data-v-c7eaaedb><a href="/entry/14346/" class="" data-v-c7eaaedb><img class="related-in-ul-li-thumb-img" src="/entry/14346/images/eyecatch__480.png" alt width="1280" height="512" loading="lazy" style="" data-v-c7eaaedb>ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック</a></li></ul></div></aside><div class="top_link" data-v-da421125><a href="/" class="btn btn-primary" data-v-da421125>トップページに戻る</a></div><div class="header-breadcrumb" data-v-da421125 data-v-b934bba3><div class="header-breadcrumb__inner" data-v-b934bba3><ul itemscope itemtype="http://schema.org/BreadcrumbList" data-v-b934bba3><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" data-v-b934bba3><a href="/" class="" itemprop="item" data-v-b934bba3>ICS MEDIA<meta itemprop="position" content="1" data-v-b934bba3></a></li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" data-v-b934bba3><a href="/entry/category/html5/" class="" itemprop="item" data-v-b934bba3>HTMLコーダー<meta itemprop="position" content="2" data-v-b934bba3></a></li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" data-v-b934bba3><a aria-current="page" href="/entry/230327/" class="router-link-active router-link-exact-active" itemprop="item" data-v-b934bba3>CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう<meta itemprop="position" content="3" data-v-b934bba3></a></li></ul></div></div></div><footer class="site_info" data-v-53af800e data-v-63cb43db><div class="site_info-sections" data-v-63cb43db><div class="site_info-sections_item" data-v-63cb43db><h3 data-v-63cb43db>このサイトについて</h3><ruby data-v-63cb43db>ICS MEDIA<rt data-v-63cb43db>アイシーエスメディア</rt></ruby>は株式会社<ruby data-v-63cb43db>ICS<rt data-v-63cb43db>アイシーエス</rt></ruby>が運営するオウンドメディアです。UIデザインやフロントエンドのノウハウや最新技術を掲載しています。UIデザインやフロントエンドのノウハウや最新技術を週1回のペースで掲載しています。 <ul data-v-63cb43db><li data-v-63cb43db><a href="/entry/about/" class="" data-v-63cb43db>About</a></li><li data-v-63cb43db><a href="https://docs.google.com/forms/d/e/1FAIpQLSdxYknUt8noNJjuuxAIFgnyNL13XpL4MuwQoOrU_inUz8MhGg/viewform?usp=sf_link" target="_blank" data-v-63cb43db> 記事に関するお問い合わせ </a></li></ul></div><div class="site_info-sections_item" data-v-63cb43db><h3 data-v-63cb43db>運営会社について</h3> ICSはインタラクションデザイン専門のウェブ制作会社。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。 <ul data-v-63cb43db><li data-v-63cb43db><a href="https://ics-web.jp/" target="_blank" data-v-63cb43db> 会社サイト </a></li><li data-v-63cb43db><a href="https://ics-web.jp/contact/" target="_blank" data-v-63cb43db> 会社へのお問い合わせ （仕事の相談等） </a></li></ul> インタラクションコンテンツの制作に挑戦しながら、互いにスキルを高め合えるスタッフをICSでは募集しています。 <ul data-v-63cb43db><li data-v-63cb43db><a href="https://ics-web.jp/recruit/" rel="noopener noreferrer" data-v-63cb43db>採用情報について</a></li></ul></div><div class="site_info-sections_item" data-v-63cb43db><h3 data-v-63cb43db>常に鮮度の高い情報を</h3> ICS MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。 <ul data-v-63cb43db><li data-v-63cb43db><a href="/entry/all/" class="" data-v-63cb43db> すべての記事 </a></li><li data-v-63cb43db><a href="/feed/atom.xml" target="_blank" title="ICS MEDIAのRSSをリーダーに登録しよう" data-v-63cb43db> RSS </a></li><li data-v-63cb43db><a href="https://x.com/icsweb" target="_blank" title="ICSのXをフォローしよう" data-v-63cb43db> Xアカウント </a></li></ul></div></div><div class="copyright" role="contentinfo" data-v-63cb43db data-v-4b34f398> Copyright © 2025 ICS INC. All Rights Reserved. <div class="raw-pages-item" data-v-4b34f398><a href="/entry/copyright/" class="" data-v-4b34f398>利用規約・免責・著作権</a></div><div class="raw-pages-item" data-v-4b34f398><a href="/entry/privacy/" class="" data-v-4b34f398>プライバシーポリシー</a></div><div class="raw-pages-item" data-v-4b34f398><a href="/entry/quality/" class="" data-v-4b34f398>品質への取り組み</a></div></div></footer></div></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true">[["ShallowReactive",1],{"data":2,"state":4,"once":6,"_errors":7,"serverRendered":9,"path":10,"prerenderedAt":11,"pinia":12},["ShallowReactive",3],{},["Reactive",5],{},["Set"],["ShallowReactive",8],{},true,"/entry/230327/",1742812903036,["Reactive",13],{"page":14,"transition":20},{"id":15,"title":16,"type":17,"line":18,"useHero":19},"html5","","top","category",false,{"current":16}]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/",buildId:"d88dd883-c3c8-48e2-a766-0779fa224f8a",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>