{"id":373600,"date":"2022-10-17T08:30:05","date_gmt":"2022-10-17T15:30:05","guid":{"rendered":"https:\/\/css-tricks.com\/?p=373600"},"modified":"2022-10-19T07:38:24","modified_gmt":"2022-10-19T14:38:24","slug":"pure-css-bezier-curve-motion-paths","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/pure-css-bezier-curve-motion-paths\/","title":{"rendered":"Pure CSS Bezier Curve Motion Paths"},"content":{"rendered":"\n<p>Are you a <a href=\"https:\/\/en.wikipedia.org\/wiki\/B%C3%A9zier_curve\" rel=\"noopener\">Bezier curve<\/a> lover like I am?<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExEGWgN\" src=\"\/\/codepen.io\/anon\/embed\/ExEGWgN?height=450&amp;theme-id=1&amp;slug-hash=ExEGWgN&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExEGWgN\" title=\"CodePen Embed ExEGWgN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Besides being elegant, Bezier curves have nice mathematical properties due to their <a href=\"https:\/\/en.wikipedia.org\/wiki\/B%C3%A9zier_curve#Specific_cases\" rel=\"noopener\">definition<\/a> and <a href=\"https:\/\/en.wikipedia.org\/wiki\/B%C3%A9zier_curve#Constructing_B%C3%A9zier_curves\" rel=\"noopener\">construction<\/a>. No wonder they are widely used in so many areas:<\/p>\n\n\n\n<ul><li>As a drawing\/design tool: They are often refered to as &#8220;paths&#8221; in vector drawing software.<\/li><li>As a format of representing curves: They are used in SVG, fonts and many other vector graphic formats.<\/li><li>As a mathematical function: Often used to control animation timing.<\/li><\/ul>\n\n\n\n<p>Now, how about using Bezier curves as motion paths with CSS?<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"quick-recap\">Quick Recap<\/h3>\n\n\n<p>Depending on the context, when referring to a &#8220;Bezier curve&#8221;, we often assume a 2D cubic Bezier curve.<\/p>\n\n\n\n<p>Such a curve is defined by four points:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"320\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/Bezier_curve.svg.png?resize=512%2C320&#038;ssl=1\" alt=\"Bezier curve\" class=\"wp-image-374322\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/Bezier_curve.svg.png?w=512&amp;ssl=1 512w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/Bezier_curve.svg.png?resize=300%2C188&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Bezier_curve.svg\" rel=\"noopener\">MarianSigler, Public domain, via Wikimedia Commons<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"is-style-explanation\">Note: In this article, we generally refer to&nbsp;<code>P0<\/code>&nbsp;and&nbsp;<code>P3<\/code>&nbsp;as endpoints,&nbsp;<code>P1<\/code>&nbsp;and&nbsp;<code>P2<\/code>&nbsp;as control points.<\/p>\n\n\n\n<p>The word &#8220;cubic&#8221; means the underlying function of the curve is a cubic polynomial. There are also &#8220;quadratic&#8221; Bezier curves, which are similar, but with one fewer control point.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-problem\">The Problem<\/h3>\n\n\n<p>Say you are given an arbitrary 2D cubic Beizer curve, how would you animate an element with pure CSS animation, such that it moves&nbsp;<em>precisely<\/em>&nbsp;along the curve?<\/p>\n\n\n\n<p>As an example, how would you recreate this animation?<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLKRPme\" src=\"\/\/codepen.io\/anon\/embed\/yLKRPme?height=450&amp;theme-id=1&amp;slug-hash=yLKRPme&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLKRPme\" title=\"CodePen Embed yLKRPme\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In this article we will explore three methods with different flavors. For each solution we will present an interactive demo, then explain how it works. There are lots of mathematical calculations and proofs behind the scene, but don&#8217;t worry, we will not go very deep.<\/p>\n\n\n\n<p>Let&#8217;s start!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"method-1-time-warp\">Method 1: Time Warp<\/h3>\n\n\n<p>Here&#8217;s the basic idea:<\/p>\n\n\n\n<ul><li>Set up <code>@keyframes<\/code> to move the element from one endpoint of the curve to the other.<\/li><li>Distort the time for each coordinate individually, using <code>animation-timing-function<\/code>.<\/li><\/ul>\n\n\n\n<p class=\"is-style-explanation\">Note: There are lots of examples and explanations in <a href=\"https:\/\/css-tricks.com\/advanced-css-animation-using-cubic-bezier\/\">Temani Afif&#8217;s article<\/a> (2021).<\/p>\n\n\n\n<p>Using the <code>cubic-bezier()<\/code> function with correct parameters, we can create a motion path of any cubic Bezier curve:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjLmMwm\" src=\"\/\/codepen.io\/anon\/embed\/JjLmMwm?height=450&amp;theme-id=1&amp;slug-hash=JjLmMwm&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjLmMwm\" title=\"CodePen Embed JjLmMwm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This demo shows a pure CSS animation. Yet canvas and JavaScript are used, which serve two purposes:<\/p>\n\n\n\n<ul><li>Visualize the underlying Bezier curve (red curve).<\/li><li>Allow adjusting the curve with the typical &#8220;path&#8221; UI.<\/li><\/ul>\n\n\n\n<p>You can drag the two endpoints (black dots) and the two control points (black squares). The JavaScript code will update the animation accordingly, by updating a few CSS variables.<\/p>\n\n\n\n<p class=\"is-style-explanation\">Note: Here&#8217;s a <a href=\"https:\/\/codepen.io\/coolwanglu\/pen\/LYdgeWr\" rel=\"noopener\">pure CSS version<\/a> for reference.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"how-it-works\">How it works<\/h4>\n\n\n<p>Suppose the desired cubic Bezier curve is defined by four points: <code>p0<\/code>, <code>p1<\/code>, <code>p2<\/code>, and <code>p3<\/code>. We set up CSS rules as following:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* pseudo CSS code *\/\ndiv {\n  animation-name: move-x, move-y;\n  \/*\n    Define:\n    f(x, a, b) = (x - a) \/ (b - a)\n    qx1 = f(p1.x, p0.x, p3.x)\n    qx2 = f(p2.x, p0.x, p3.x)\n    qy1 = f(p1.y, p0.y, p3.y)\n    qy2 = f(p2.y, p0.y, p3.y)\n  *\/\n  animation-timing-function: \n    cubic-bezier(1\/3, qx1, 2\/3, qx1),\n    cubic-bezier(1\/3, qy1, 2\/3, qy2);\n}\n\n@keyframes move-x {\n  from {\n    left: p0.x;\n  }\n  to {\n    left: p3.x;\n  }\n}\n\n@keyframes move-y {\n  from {\n    top: p0.y;\n  }\n  to {\n    top: p3.y;\n  }\n}<\/code><\/pre>\n\n\n\n<p>The <code>@keyframes<\/code> rules <code>move-x<\/code> and <code>move-y<\/code> determine the starting and finishing locations of the element. In <code>animation-timing-function<\/code> we have two magical <code>cubic-bezier()<\/code>&nbsp;functions, the parameters are calculated such that both <code>top<\/code> and <code>left<\/code> always have the correct values at any time.<\/p>\n\n\n\n<p>I&#8217;ll skip the math, but I drafted a brief proof <a href=\"https:\/\/blog.wang-lu.com\/2022\/09\/moving-items-along-bezier-curves-with.html\" rel=\"noopener\">here<\/a>, for your curious math minds.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"discussions\">Discussions<\/h4>\n\n\n<p>This method should work well for most cases. You can even make a 3D cubic Bezier curve, by introducing another animation for the&nbsp;<code>z<\/code>&nbsp;value.<\/p>\n\n\n\n<p>However there are a few minor caveats:<\/p>\n\n\n\n<ul><li>It does not work when both endpoints lie on a horizontal or vertical line, because of the division-by-zero error.<\/li><\/ul>\n\n\n\n<p class=\"is-style-explanation\">Note: In practice, you can just add a tiny offset as a workaround.<\/p>\n\n\n\n<ul><li>It does not support Bezier curves with an order higher than&nbsp;<code>3<\/code>.<\/li><li>Options for animation timing are limited.<ul><li>We use&nbsp;<code>1\/3<\/code>&nbsp;and&nbsp;<code>2\/3<\/code>&nbsp;above to achieve a linear timing.<\/li><li>You can tweak both values to adjust the timing, but it is limited compared with other methods. More on this later.<\/li><\/ul><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"method-2-competing-animations\">Method 2: Competing Animations<\/h3>\n\n\n<p>As a warm-up, imagine an element with two animations:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div {\n  animation-name: move1, move2;\n}<\/code><\/pre>\n\n\n\n<p>What is the motion path of the element, if the animations are defined as following:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes move1 {\n  to {\n    left: 256px;\n  }\n}\n\n@keyframes move2 {\n  to {\n    top: 256px;\n  }\n}<\/code><\/pre>\n\n\n\n<p>As you may have guessed, it moves diagonally:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWVPVGY\" src=\"\/\/codepen.io\/anon\/embed\/MWVPVGY?height=450&amp;theme-id=1&amp;slug-hash=MWVPVGY&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWVPVGY\" title=\"CodePen Embed MWVPVGY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now, what if the animations are defined like this instead:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes move1 {\n  to {\n    transform: translateX(256px);\n  }\n}\n\n@keyframes move2 {\n  to {\n    transform: translateY(256px);\n  }\n}<\/code><\/pre>\n\n\n\n<p>&#8220;Aha, you cannot trick me!&#8221; you might say, as you noticed that both animations are changing the same property, &#8220;<code>move2<\/code> must override <code>move1<\/code> like this:&#8221;<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvmYmXR\" src=\"\/\/codepen.io\/anon\/embed\/wvmYmXR?height=450&amp;theme-id=1&amp;slug-hash=wvmYmXR&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvmYmXR\" title=\"CodePen Embed wvmYmXR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Well, earlier I had thought so, too. But actually we get this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dymgmKV\" src=\"\/\/codepen.io\/anon\/embed\/dymgmKV?height=450&amp;theme-id=1&amp;slug-hash=dymgmKV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dymgmKV\" title=\"CodePen Embed dymgmKV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The trick is that <code>move2<\/code> does not have a&nbsp;<code>from<\/code>&nbsp;frame, which means the starting position is animated by <code>move1<\/code>.<\/p>\n\n\n\n<p>In the following demo, the starting position of <code>move<\/code>2 is visualized as the moving blue dot:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOzezeg\" src=\"\/\/codepen.io\/anon\/embed\/jOzezeg?height=450&amp;theme-id=1&amp;slug-hash=jOzezeg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOzezeg\" title=\"CodePen Embed jOzezeg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"quadratic-bezier-curves\">Quadratic Bezier Curves<\/h4>\n\n\n<p>The demo right above resembles the construction of a quadratic Bezier curve:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"150\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/Bezier_2_big.gif?resize=360%2C150&#038;ssl=1\" alt=\"B\u00e9zier 2 big\" class=\"wp-image-374324\" data-recalc-dims=\"1\"\/><figcaption><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:B%C3%A9zier_2_big.gif\" rel=\"noopener\">Phil Tregoning, Public domain, via Wikimedia Commons<\/a><\/figcaption><\/figure>\n\n\n\n<p>But they look different. The construction has three linearly moving dots (two green, one black), but our demo has only two (the blue dot and the target element).<\/p>\n\n\n\n<p>Actually the motion path in the demo&nbsp;<em>is<\/em>&nbsp;a quadratic Bezier curve, we just need to tune the keyframes carefully. I will skip <a href=\"https:\/\/blog.wang-lu.com\/2022\/08\/moving-along-bezier-curvespaths-with.html\" rel=\"noopener\">the math<\/a> and just reveal the magic:<\/p>\n\n\n\n<p>Suppose a quadratic Bezier curve is defined by points <code>p0<\/code>, <code>p1<\/code>, and <code>p2<\/code>. In order to move an element along the curve, we do the following:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* pseudo-CSS code *\/\ndiv {\n  animation-name: move1, move2;\n}\n\n@keyframes move1 {\n  from {\n    transform: translate3d(p0.x, p0.y, p0.z);\n  }\n  \/* define q1 = (2 * p1 - p2) *\/\n  to {\n    transform: translate3d(q1.x, q1.y, q1.z);\n  }\n}\n\n@keyframes move2 {\n  to {\n    transform: translate3d(p2.x, p2.y, p2.z);\n  }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNzaJov\" src=\"\/\/codepen.io\/anon\/embed\/WNzaJov?height=450&amp;theme-id=1&amp;slug-hash=WNzaJov&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNzaJov\" title=\"CodePen Embed WNzaJov\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Similar to the demo of&nbsp;<strong>Method 1<\/strong>, you can view or adjust the curve. Additionally, the demo also shows two more pieces of information:<\/p>\n\n\n\n<ul><li>The mathematical construction (gray moving parts)<\/li><li>The CSS animations (blue parts)<\/li><\/ul>\n\n\n\n<p>Both can be toggled using the checkboxes.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"cubic-bezier-curves\">Cubic Bezier Curves<\/h4>\n\n\n<p>This method works for cubic Bezier curves as well. If the curve is defined by points <code>p0<\/code>, <code>p1<\/code>, <code>p2<\/code>, and <code>p3<\/code>. The animations should be defined like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* pseudo-CSS code *\/\ndiv {\n  animation-name: move1, move2, move3;\n}\n\n@keyframes move1 {\n  from {\n    transform: translate3d(p0.x, p0.y, p0.z);\n  }\n  \/* define q1 = (3 * p1 - 3 * p2 + p3) *\/\n  to {\n    transform: translate3d(q1.x, q1.y, q1.z);\n  }\n}\n\n@keyframes move2 {\n  \/* define q2 = (3 * p2 - 2 * p3) *\/\n  to {\n    transform: translate3d(q2.x, q2.y, q2.z);\n  }\n}\n\n@keyframes move3 {\n  to {\n    transform: translate3d(p3.x, p3.y, p3.z);\n  }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYdgmOJ\" src=\"\/\/codepen.io\/anon\/embed\/LYdgmOJ?height=450&amp;theme-id=1&amp;slug-hash=LYdgmOJ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYdgmOJ\" title=\"CodePen Embed LYdgmOJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"extensions\">Extensions<\/h4>\n\n\n<p>What about 3D Bezier Curves? Actually, the truth is, all the previous examples&nbsp;<em>were<\/em>&nbsp;3D curves, we just never bothered with the&nbsp;<code>z<\/code>&nbsp;values.<\/p>\n\n\n\n<p>What about higher-order Bezier curves? I am 90% sure that the method can be naturally extended to higher orders. Please let me know if you have worked out the formula for fourth-order Bezier curves, or even better, a generic formula for Bezier curves of order N.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"method-3-standard-bezier-curve-construction\">Method 3: Standard Bezier Curve Construction<\/h3>\n\n\n<p>The <a href=\"https:\/\/en.wikipedia.org\/wiki\/B%C3%A9zier_curve#Constructing_B%C3%A9zier_curves\" rel=\"noopener\">mathematical construction<\/a> of Bezier Curves already gives us a good hint.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"150\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/Bezier_3_big.gif?resize=360%2C150&#038;ssl=1\" alt=\"B\u00e9zier 3 big\" class=\"wp-image-374325\" data-recalc-dims=\"1\"\/><figcaption><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:B%C3%A9zier_3_big.gif\" rel=\"noopener\">Phil Tregoning, Public domain, via Wikimedia Commons<\/a><\/figcaption><\/figure>\n\n\n\n<p>Step-by-step, we can determine the coordinates of all moving dots. First, we determine the location of the green dot that is moving between <code>p0<\/code> and <code>p1<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes green0 {\n  from {\n    --green0x: var(--p0x);\n    --green0y: var(--p0y);\n  }\n  to {\n    --green0x: var(--p1x);\n    --green0y: var(--p1y);\n  }\n}<\/code><\/pre>\n\n\n\n<p>Additional green dots can be constructed in a similar way.<\/p>\n\n\n\n<p>Next, we can determine the location of a blue dot like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes blue0 {\n  from {\n    --blue0x: var(--green0x);\n    --blue0y: var(--green0y);\n  }\n  to {\n    --blue0x: var(--green1x);\n    --blue0y: var(--green1y);\n  }\n}<\/code><\/pre>\n\n\n\n<p>Rinse and repeat, eventually we will get the desired curve.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dymgerL\" src=\"\/\/codepen.io\/anon\/embed\/dymgerL?height=450&amp;theme-id=1&amp;slug-hash=dymgerL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dymgerL\" title=\"CodePen Embed dymgerL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Similar to&nbsp;<strong>Method 2<\/strong>, with this method we can easily build a 3D Bezier Curve. It is also intuitive to extend the method for higher-order Bezier curves.<\/p>\n\n\n\n<p>The only downside is the usage of <code>@property<\/code>, which is not supported by all browsers.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"animation-timing\">Animation Timing<\/h3>\n\n\n<p>All the examples so far have the &#8220;linear&#8221; timing, what about easing or other timing functions?<\/p>\n\n\n\n<p class=\"is-style-explanation\">Note: By &#8220;linear&#8221; we mean <a href=\"https:\/\/en.wikipedia.org\/wiki\/B%C3%A9zier_curve#Cubic_B%C3%A9zier_curves\" rel=\"noopener\">the variable <code>t<\/code> of the curve<\/a> linearly changes from 0 to 1. In other words, <code>t<\/code> is the same as animation progress.<\/p>\n\n\n\n<p><code>animation-timing-function<\/code> is never used in&nbsp;<strong>Method 2<\/strong>&nbsp;and&nbsp;<strong>Method 3<\/strong>. Like other CSS animations, we can use any supported timing function here, but we need to apply the same function for all animations (<code>move1<\/code>, <code>move2<\/code>, and <code>move3<\/code>) at the same time.<\/p>\n\n\n\n<p>Here&#8217;s an example of <code>animation-timing-function: cubic-bezier(1, 0.1, 0, 0.9)<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBoJKNG\" src=\"\/\/codepen.io\/anon\/embed\/qBoJKNG?height=450&amp;theme-id=1&amp;slug-hash=qBoJKNG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBoJKNG\" title=\"CodePen Embed qBoJKNG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And here&#8217;s how it looks like with <code>animation-timing-function: steps(18, end)<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYjwXOO\" src=\"\/\/codepen.io\/anon\/embed\/zYjwXOO?height=450&amp;theme-id=1&amp;slug-hash=zYjwXOO&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYjwXOO\" title=\"CodePen Embed zYjwXOO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>On the other hand,&nbsp;<strong>Method 1<\/strong>&nbsp;is trickier, because it already uses a <code>cubic-bezier(u1, v1, u2, v2)<\/code> timing function. In the examples above we have <code>u1=1\/3<\/code> and <code>u2=2\/3<\/code>. In fact we can tweak the timing by changing both parameters. Again, all animations (e.g., <code>move-x<\/code> and <code>move-y<\/code>) must have the same values of <code>u1<\/code> and <code>u2<\/code>.<\/p>\n\n\n\n<p>Here&#8217;s how it looks like when <code>u1=1<\/code> and <code>u2=0<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOzexey\" src=\"\/\/codepen.io\/anon\/embed\/jOzexey?height=450&amp;theme-id=1&amp;slug-hash=jOzexey&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOzexey\" title=\"CodePen Embed jOzexey\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>With&nbsp;<strong>Method 2<\/strong>, we can achieve exactly the same effect by setting <code>animation-timing-function<\/code> to <code>cubic-bezier(1, 0.333, 0, 0.667)<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYWmjLW\" src=\"\/\/codepen.io\/anon\/embed\/zYWmjLW?height=450&amp;theme-id=1&amp;slug-hash=zYWmjLW&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYWmjLW\" title=\"CodePen Embed zYWmjLW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In fact, it works in a more general way:<\/p>\n\n\n\n<p>Suppose that we are given a cubic Bezier curve, and we created two animations for the curve with&nbsp;<strong>Method 1<\/strong>&nbsp;and&nbsp;<strong>Method 2<\/strong>&nbsp;respectively. For any valid values of <code>u1<\/code> and <code>u2<\/code>, the following two setups have the same animation timing:<\/p>\n\n\n\n<ul><li><strong>Method 1<\/strong>&nbsp;with <code>animation-timing-function: cubic-bezier(u1, *, u2, *)<\/code>.<\/li><li><strong>Method 2<\/strong>&nbsp;with <code>animation-timing-function: cubic-bezier(u1, 1\/3, u2, 2\/3)<\/code>.<\/li><\/ul>\n\n\n\n<p>Now we see why&nbsp;<strong>Method 1<\/strong>&nbsp;is &#8220;limited&#8221;: with&nbsp;<strong>Method 1<\/strong>&nbsp;we can only <code>cubic-bezier()<\/code>&nbsp;with two parameters, but with&nbsp;<strong>Method 2<\/strong>&nbsp;and&nbsp;<strong>Method 3<\/strong>&nbsp;we can use any CSS <code>animation-timing-function<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"conclusions\">Conclusions<\/h3>\n\n\n<p>In this article, we discussed 3 different methods of moving elements precisely along a Bezier curve, using only CSS animations.<\/p>\n\n\n\n<p>While all 3 methods are more or less practical, they have their own pros and cons:<\/p>\n\n\n\n<ul><li><strong>Method 1<\/strong>&nbsp;might be more intuitive for those familiar with the timing function hack. But it is less flexible with animation timing.<\/li><li><strong>Method 2<\/strong>&nbsp;has very simple CSS rules. Any CSS timing function can be applied directly. However, it could be hard to remember the formulas.<\/li><li><strong>Method 3<\/strong>&nbsp;make more sense for those familiar with the math construction of Bezier curves. Animation timing is also flexible. On the other hand, not all modern browsers are supported, due the usage of <code>@property<\/code>.<\/li><\/ul>\n\n\n\n<p>That&#8217;s all! I hope you find this article interesting. Please let me know your thoughts!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Besides being elegant, Bezier curves have nice mathematical properties due to their definition and construction. No wonder they are widely used in so many areas! Now, how about using Bezier curves as motion paths with CSS?<\/p>\n","protected":false},"author":288708,"featured_media":374452,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"Pure CSS Bezier Curve Motion Paths by @coolwanglu","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[612],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/css-cubic-bezier-animation-path-header.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":340036,"url":"https:\/\/css-tricks.com\/advanced-css-animation-using-cubic-bezier\/","url_meta":{"origin":373600,"position":0},"title":"Advanced CSS Animation Using cubic-bezier()","date":"May 13, 2021","format":false,"excerpt":"When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations. There are a couple of tricks though that I want to talk about that might help make things easier, while staying in vanilla CSS: Multiple animationsTiming functions The first one is more\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/advanced-CSS-animations.png?fit=1200%2C625&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344249,"url":"https:\/\/css-tricks.com\/build-complex-css-transitions-using-custom-properties-and-cubic-bezier\/","url_meta":{"origin":373600,"position":1},"title":"Build Complex CSS Transitions using Custom Properties and cubic-bezier()","date":"July 14, 2021","format":false,"excerpt":"I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to create complex hover effect without resorting to keyframes. In this article, I will show you how to create even more complex CSS\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/complex-transition.png?fit=1183%2C659&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":183403,"url":"https:\/\/css-tricks.com\/bezier-game\/","url_meta":{"origin":373600,"position":2},"title":"The B\u00e9zier Game","date":"September 17, 2014","format":false,"excerpt":"A game to help you master the pen tool. By Mark MacKay. Early in my career I had a job where a good half of it was cutting detailed clipping paths on photos (using the Pen Tool in Photoshop). We had an in-house photography department that shot furniture and electronics\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":280052,"url":"https:\/\/css-tricks.com\/reversing-an-easing-curve\/","url_meta":{"origin":373600,"position":3},"title":"Reversing an Easing Curve","date":"December 17, 2018","format":false,"excerpt":"Let\u2019s take a look at a carousel I worked on where items slide in and out of view with CSS animations. To get each item to slide in and out of view nicely I used a cubic-bezier for the animation-timing-function property, instead of using a standard easing keyword. See the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/easing-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":245876,"url":"https:\/\/css-tricks.com\/svg-path-syntax-illustrated-guide\/","url_meta":{"origin":373600,"position":4},"title":"The SVG `path` Syntax: An Illustrated Guide","date":"October 3, 2016","format":false,"excerpt":"The element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute. The value it has is a mini\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-18-at-1.34.01-PM.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":251474,"url":"https:\/\/css-tricks.com\/svg-squircle\/","url_meta":{"origin":373600,"position":5},"title":"SVG Squircle","date":"February 13, 2017","format":false,"excerpt":"Amelia Bellamy-Royds: I wondered if I could come up with an easy formula to create a \"squircle\" type curve with SVG bezier curves. It wouldn't be the exact shape, but it could be close. The idea: The \"end points\" of the curve segments are the mid-points of each side of\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/02\/squircle.png?fit=1090%2C584&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373600"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288708"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=373600"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373600\/revisions"}],"predecessor-version":[{"id":374576,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373600\/revisions\/374576"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/374452"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=373600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=373600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=373600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}