{"id":243593,"date":"2016-07-22T10:51:02","date_gmt":"2016-07-22T17:51:02","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=243593"},"modified":"2016-10-19T09:51:01","modified_gmt":"2016-10-19T16:51:01","slug":"offset-distance","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-distance\/","title":{"rendered":"offset-distance"},"content":{"rendered":"<div class=\"explanation\">This property began life as <code>motion-offset<\/code>. This, and all other related motion-* properties, are being renamed offset-* in <a href=\"https:\/\/drafts.fxtf.org\/motion-1\/\" rel=\"noopener\">the spec<\/a>. We&#8217;re changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes.<\/div>\n<p>The <code>motion-offset<\/code> property in CSS says: how far along the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/motion-path\/\"><code>motion-path<\/code><\/a> are you? This is the <strong>animatable<\/strong> property associated with motion paths. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.thing-that-moves {\r\n  \/* \"Old\" syntax. Available in Blink browsers as of ~October 2015 *\/\r\n  motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');\r\n  motion-offset: 0%;\r\n\r\n  \/* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 *\/\r\n  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');\r\n  offset-distance: 0%;\r\n \r\n  animation: move 3s linear infinite;\r\n}\r\n\r\n\/* Animate the element along the path from 0% to 100%  *\/\r\n@keyframes move {\r\n  100% { \r\n    motion-offset: 100%; \/* Old *\/\r\n    offset-distance: 100%; \/* New *\/\r\n  }\r\n}<\/code><\/pre>\n<p>In the example above, we have set the initial <code>motion-offset<\/code> value at <code>0%<\/code>, though it&#8217;s worth noting that zero is the default value, even when not explicitly defined (we could have left that out).<\/p>\n<h3>Variables<\/h3>\n<p>The <code>offset-distance<\/code> property accepts the following values:<\/p>\n<ul>\n<li><code>length<\/code><\/li>\n<li><code>percentage<\/code><\/li>\n<\/ul>\n<p>In both cases, the value is specifying the length of distance from the starting point of the path (default is <code>0px<\/code> or <code>0%<\/code>) to the end point of the path.<\/p>\n<h3>Example<\/h3>\n<p>In this example, we have two circles where one small circle travels along the path of a larger circle.<\/p>\n<p>Here is the SVG file we are using to draw the shapes:<\/p>\n<pre rel=\"SVG\"><code class=\"language-markup\">&lt;svg viewbox=\"0,0 10,10\" width=\"200px\" height=\"200px\"&gt;\r\n  \r\n  &lt;!-- the circle path to be animated along --&gt;  \r\n  &lt;path \r\n    class=\"track\"\r\n    fill=\"none\"\r\n    stroke-width=\"0.25\"\r\n    d=\"M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0\"\r\n  \/&gt;\r\n  \r\n  &lt;!-- the mover that follows the path --&gt;\r\n  &lt;circle class=\"marker\" r=\"1\" fill=\"orange\"&gt;&lt;\/circle&gt;\r\n  \r\n&lt;\/svg&gt;<\/code><\/pre>\n<p>Now, we can set the <code>.marker<\/code> class in our CSS to follow the <code>.track<\/code> class coordinates:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">\/* The motion-offset is zero by default *\/\r\n.marker {\r\n  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');\r\n  animation: move 3s linear infinite;\r\n}\r\n\r\n@keyframes move {\r\n  \/* Move the .marker from it's default value of 0% to 100% of the path's length *\/\r\n  100% { offset-distance: 100%; }\r\n}<\/code><\/pre>\n<p data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"yJXArG\" data-default-tab=\"css,result\" data-user=\"geoffgraham\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/geoffgraham\/pen\/yJXArG\/\" rel=\"noopener\">Simple Example of Animating Along a Path<\/a> by Geoff Graham (<a href=\"http:\/\/codepen.io\/geoffgraham\" rel=\"noopener\">@geoffgraham<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Similarly, we can stop the <code>offset-distance<\/code> value at 50% and the animation would drop off halfway around the path:<\/p>\n<p data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"BzmZwA\" data-default-tab=\"result\" data-user=\"geoffgraham\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/geoffgraham\/pen\/BzmZwA\/\" rel=\"noopener\">Simple Example of Animating Along a Path<\/a> by Geoff Graham (<a href=\"http:\/\/codepen.io\/geoffgraham\" rel=\"noopener\">@geoffgraham<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Or, to control the speed of the animation, we could multiply the <code>offset-distance<\/code> value to 300% to speed things up. However, if we&#8217;ve specified the amount of time the animation runs at a value greater than what it takes the element to travel the path, then the movement will stop until the animation has completed its interval before repeating:<\/p>\n<p data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"bZYyYK\" data-default-tab=\"result\" data-user=\"geoffgraham\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/geoffgraham\/pen\/bZYyYK\/\" rel=\"noopener\">Simple Example of Animating Along a Path<\/a> by Geoff Graham (<a href=\"http:\/\/codepen.io\/geoffgraham\" rel=\"noopener\">@geoffgraham<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Browser support<\/h3>\n<p>the <code>offset-distance<\/code> property is still considered an experimental feature at the time of this writing and there is no documentation on browser support. However, there is documentation on <code>motion-path<\/code> support and we can use that as a baseline for the time being.<\/p>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-motion-paths\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">46<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">72<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">16.0<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">16.0<\/span><\/td><\/tr><\/table><\/div><\/div>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-path\/\">offset-path<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-rotation\/\">offset-rotation<\/a><\/li>\n<li>offset-position<\/li>\n<li>offset-anchor<\/li>\n<\/ul>\n<h3>Additional Information<\/h3>\n<ul>\n<li><a href=\"https:\/\/drafts.fxtf.org\/motion-1\/\" rel=\"noopener\">Motion Path Module Level 1 Spec<\/a><\/li>\n<li><a href=\"https:\/\/codepen.io\/collection\/AQWaem\/\" rel=\"noopener\">Examples on CodePen<\/a><\/li>\n<li><a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=139128\" rel=\"noopener\">WebKit Ticket #139128<\/a><\/li>\n<li><a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1186329\" rel=\"noopener\">Mozilla Ticket #1186329<\/a><\/li>\n<li><a href=\"https:\/\/wpdev.uservoice.com\/forums\/257854-microsoft-edge-developer\/suggestions\/7804467-support-css-motion-path-module\" rel=\"noopener\">Microsoft Edge feature request<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This property began life as motion-offset. This, and all other related motion-* properties, are being renamed offset-* in the spec. We&#8217;re changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes. The motion-offset property in CSS says: how far along the motion-path are you? [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13939,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":243521,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-path\/","url_meta":{"origin":243593,"position":0},"title":"offset-path","date":"July 19, 2016","format":false,"excerpt":"This property began life as motion-path. This, and all other related motion-* properties, are being renamed offset-* in the spec. We're changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes. The offset-path property in CSS defines a movement\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":243778,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-rotate\/","url_meta":{"origin":243593,"position":1},"title":"offset-rotate","date":"July 22, 2016","format":false,"excerpt":"This property began life as motion-rotation, then it became offset-rotation, now it's offset-rotate. It's still a Working Draft experimental property so \ud83e\udd37\u200d\u2640\ufe0f. If you're going to use it, you might as well use whatever the most recent thing is. The offset-rotate property in CSS controls the angle of an element\u2026","rel":"","context":"In \"offset\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":270333,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-anchor\/","url_meta":{"origin":243593,"position":2},"title":"offset-anchor","date":"May 4, 2018","format":false,"excerpt":"The offset-anchor property defines a point within the box it is applied as the anchor that moves along the offset-path. That's kinda wordy, so let's break that down a bit. You have an element, say a box: See the Pen Orange Box by Geoff Graham (@geoffgraham) on CodePen. You want\u2026","rel":"","context":"In \"offset-path\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/anchor.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375796,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-slice\/","url_meta":{"origin":243593,"position":3},"title":"border-image-slice","date":"December 20, 2022","format":false,"excerpt":"The CSS border-image-slice tells the browser where to \u201cslice\u201d an image being used to create the pieces of an element\u2019s borders. .element { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 30%; border-image-repeat: repeat; } The border-image-slice property is defined in the CSS Backgrounds and Borders Module Level 3 specification. When\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311020,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-offset\/","url_meta":{"origin":243593,"position":4},"title":"text-underline-offset","date":"May 18, 2020","format":false,"excerpt":"The text-underline-offset property in CSS sets the distance of text underlines from their initial position. .element { \u00a0 text-underline-offset: 0.5em; } Once you apply an underline for an element using text-decoration with the value of underline, you can say how far that line should be from your text using the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376323,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-width\/","url_meta":{"origin":243593,"position":5},"title":"border-image-width","date":"January 12, 2023","format":false,"excerpt":"The CSS border-image-width property is used to determine the width of the border\u2019s image file, as provided by the CSS border-image-source property. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 70; border-image-width: 40%; border-image-repeat: repeat; } CodePen Embed Fallback The border-image-width property is defined in the CSS Backgrounds and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/243593"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=243593"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/243593\/revisions"}],"predecessor-version":[{"id":246758,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/243593\/revisions\/246758"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13939"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=243593"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=243593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}