{"id":335207,"date":"2021-03-04T07:51:39","date_gmt":"2021-03-04T15:51:39","guid":{"rendered":"https:\/\/css-tricks.com\/?p=335207"},"modified":"2021-03-04T07:51:41","modified_gmt":"2021-03-04T15:51:41","slug":"exploring-property-and-its-animating-powers","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/exploring-property-and-its-animating-powers\/","title":{"rendered":"Exploring @property and its Animating Powers"},"content":{"rendered":"\n<p>Uh, what\u2019s <code>@property<\/code>? It\u2019s a new CSS feature! It gives you superpowers. No joke, there is stuff that <code>@property<\/code> can do that unlocks things in CSS we\u2019ve never been able to do before.<\/p>\n\n\n\n<p>While everything about <code>@property<\/code> is exciting, perhaps the most interesting thing is that it provides a way to specify a <strong>type<\/strong> for custom CSS properties. A type provides more contextual information to the browser, and that results in something cool: <strong>We can give the browser the information is needs to transition and animate those properties!<\/strong><\/p>\n\n\n\n<!--more-->\n\n\n\n<p>But before we get too giddy about this, it\u2019s worth noting that support isn\u2019t quite there. As it current stands at the time of this writing, <code>@property<\/code> is supported in Chrome and, by extension, Edge. We need to keep an eye on <a href=\"https:\/\/caniuse.com\/mdn-css_at-rules_property\" rel=\"noopener\">browser support<\/a> for when we get to use this in other places, like Firefox and Safari.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-first-off-we-get-type-checking\">First off, we get type checking<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@property --spinAngle {\n  \/* An initial value for our custom property *\/\n  initial-value: 0deg;\n  \/* Whether it inherits from parent set values or not *\/\n  inherits: false;\n  \/* The type. Yes, the type. You thought TypeScript was cool *\/\n  syntax: '&lt;angle>';\n}\n\n@keyframes spin {\n  to {\n    --spinAngle: 360deg;\n  }\n}<\/code><\/pre>\n\n\n\n<p>That\u2019s right! Type checking in CSS. It\u2019s sorta like creating our very own mini CSS specification. And that\u2019s a simple example. Check out all of the various types we have at our disposal:<\/p>\n\n\n\n<ul><li><code>length<\/code><\/li><li><code>number<\/code><\/li><li><code>percentage<\/code><\/li><li><code>length-percentage<\/code><\/li><li><code>color<\/code><\/li><li><code>image<\/code><\/li><li><code>url<\/code><\/li><li><code>integer<\/code><\/li><li><code>angle<\/code><\/li><li><code>time<\/code><\/li><li><code>resolution<\/code><\/li><li><code>transform-list<\/code><\/li><li><code>transform-function<\/code><\/li><li><code>custom-ident<\/code> (a custom identifier string)<\/li><\/ul>\n\n\n\n<p>Before any of this, we may have relied on using \u201ctricks\u201d for powering animations with custom properties.<\/p>\n\n\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">CSS variables are awesome, right? But scope power is often overlooked. For example, take this demo, 3 different animations but only 1 animation defined &#x1f4aa; That means dynamic animations &#x1f60e; <a href=\"https:\/\/t.co\/VN02NlC4G8\">https:\/\/t.co\/VN02NlC4G8<\/a> via <a href=\"https:\/\/twitter.com\/CodePen?ref_src=twsrc%5Etfw\" rel=\"noopener\">@CodePen<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/CSS?src=hash&amp;ref_src=twsrc%5Etfw\" rel=\"noopener\">#CSS<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/animation?src=hash&amp;ref_src=twsrc%5Etfw\" rel=\"noopener\">#animation<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/webdev?src=hash&amp;ref_src=twsrc%5Etfw\" rel=\"noopener\">#webdev<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/webdesign?src=hash&amp;ref_src=twsrc%5Etfw\" rel=\"noopener\">#webdesign<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/coding?src=hash&amp;ref_src=twsrc%5Etfw\" rel=\"noopener\">#coding<\/a> <a href=\"https:\/\/t.co\/ig8baxr7F3\">pic.twitter.com\/ig8baxr7F3<\/a><\/p>\u2014 Jhey &#x1f43b;&#x1f6e0; (@jh3yy) <a href=\"https:\/\/twitter.com\/jh3yy\/status\/1191695646752948225?ref_src=twsrc%5Etfw\" rel=\"noopener\">November 5, 2019<\/a><\/blockquote> <script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n\n\n\n<p>What cool stuff can we do then? Let\u2019s take a look to spark our imaginations.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-let-s-animate-color\">Let\u2019s animate color<\/h3>\n\n\n<p>How might you animate an element either through a series of colors or between them? I\u2019m a big advocate for the HSL color space which breaks things down into fairly understandable numbers: hue, saturation, and lightness, respectively.<\/p>\n\n\n\n<p>Animating a hue feels like something fun we can do. What\u2019s colorful? A rainbow! There\u2019s a variety of ways we could make a rainbow. Here\u2019s one:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNWypbj\" src=\"\/\/codepen.io\/anon\/embed\/rNWypbj?height=450&amp;theme-id=1&amp;slug-hash=rNWypbj&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNWypbj\" title=\"CodePen Embed rNWypbj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In this example, CSS Custom Properties are set on the different bands of the rainbow using <code>:nth-child()<\/code> to scope them to individual bands. Each band also has an <code>--index<\/code> set to help with sizing.<\/p>\n\n\n\n<p>To animate those bands, we might use that <code>--index<\/code> to set some negative animation delays, but then use the same keyframe animation to cycle through hues.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.rainbow__band {\n  border-color: hsl(var(--hue, 10), 80%, 50%);\n  animation: rainbow 2s calc(var(--index, 0) * -0.2s) infinite linear;\n}\n\n@keyframes rainbow {\n  0%, 100% {\n    --hue: 10;\n  }\n  14% {\n    --hue: 35;\n  }\n  28% {\n    --hue: 55;\n  }\n  42% {\n    --hue: 110;\n  }\n  56% {\n    --hue: 200;\n  }\n  70% {\n    --hue: 230;\n  }\n  84% {\n    --hue: 280;\n  }\n}<\/code><\/pre>\n\n\n\n<p>That might work out okay if you want a \u201cstepped\u201d effect. But, those keyframe steps aren\u2019t particularly accurate. I\u2019ve used steps of <code>14%<\/code> as a rough jump.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNYZExP\" src=\"\/\/codepen.io\/anon\/embed\/oNYZExP?height=450&amp;theme-id=1&amp;slug-hash=oNYZExP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNYZExP\" title=\"CodePen Embed oNYZExP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We could animate the <code>border-color<\/code> and that would get the job done. But, we\u2019d still have a keyframe step calculation issue. And we need to write a lot of CSS to get this done:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes rainbow {\n  0%, 100% {\n    border-color: hsl(10, 80%, 50%);\n  }\n  14% {\n    border-color: hsl(35, 80%, 50%);\n  }\n  28% {\n    border-color: hsl(55, 80%, 50%);\n  }\n  42% {\n    border-color: hsl(110, 80%, 50%);\n  }\n  56% {\n    border-color: hsl(200, 80%, 50%);\n  }\n  70% {\n    border-color: hsl(230, 80%, 50%);\n  }\n  84% {\n    border-color: hsl(280, 80%, 50%);\n  }\n}<\/code><\/pre>\n\n\n\n<p>Enter <code>@property<\/code>. Let\u2019s start by defining a custom property for hue. This tells the browser our custom property, <code>--hue<\/code>, is going to be a number (not a string that looks like a number):<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@property --hue {\n  initial-value: 0;\n  inherits: false;\n  syntax: '&lt;number>';\n}<\/code><\/pre>\n\n\n\n<p>Hue values in HSL can go from <code>0<\/code> to <code>360<\/code>. We start with an initial value of <code>0<\/code>. The value isn\u2019t going to inherit. And our value, in this case, is a number. The animation is as straightforward as:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes rainbow {\n  to {\n    --hue: 360;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Yep, that\u2019s the ticket:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjbWpEZ\" src=\"\/\/codepen.io\/anon\/embed\/JjbWpEZ?height=450&amp;theme-id=1&amp;slug-hash=JjbWpEZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjbWpEZ\" title=\"CodePen Embed JjbWpEZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>To get the starting points accurate, we could play with delays for each band. This gives us some cool flexibility. For example, we can up the <code>animation-duration<\/code> and we get a slow cycle. Have a play with the speed in this demo.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKNWQxq\" src=\"\/\/codepen.io\/anon\/embed\/KKNWQxq?height=450&amp;theme-id=1&amp;slug-hash=KKNWQxq&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKNWQxq\" title=\"CodePen Embed KKNWQxq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It may not be the \u201cwildest\u201d of examples, but I think animating color has some fun opportunities when we use color spaces that make logical use of numbers. Animating through the color wheel before required some trickiness. For example, generating keyframes with a preprocessor, like Stylus:<\/p>\n\n\n\n<pre rel=\"Stylus\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">@keyframes party \n  for $frame in (0..100)\n    {$frame * 1%}\n      background 'hsl(%s, 65%, 40%)' % ($frame * 3.6)<\/code><\/pre>\n\n\n\n<p>We do this purely because this isn\u2019t understood by the browser. It sees going from 0 to 360 on the color wheel as an instant transition because both hsl values show the same color.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes party {\n  from {\n    background: hsl(0, 80%, 50%); \n  }\n  to {\n    background: hsl(360, 80%, 50%);\n  }\n}<\/code><\/pre>\n\n\n\n<p>The keyframes are the same, so the browser assumes the animation stays at the same <code>background<\/code> value when what we actually want is for the browser to go through the entire hue spectrum, starting at one value and ending at that same value after it goes through the motions.<\/p>\n\n\n\n<p>Think of all the other opportunities we have here. We can:<\/p>\n\n\n\n<ul><li>animate the saturation<\/li><li>use different easings<\/li><li>animate the lightness<\/li><li>Try <code>rgb()<\/code><\/li><li>Try degrees in <code>hsl()<\/code> and declare our custom property type as <code>&lt;angle&gt;<\/code><\/li><\/ul>\n\n\n\n<p>What\u2019s neat is that we can share that animated value across elements with scoping! Consider this button. The border and shadow animate through the color wheel on hover.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJRLMxE\" src=\"\/\/codepen.io\/anon\/embed\/OJRLMxE?height=450&amp;theme-id=1&amp;slug-hash=OJRLMxE&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJRLMxE\" title=\"CodePen Embed OJRLMxE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Animating color leads me think\u2026 <em>wow!<\/em><\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNYxRXb\" src=\"\/\/codepen.io\/anon\/embed\/oNYxRXb?height=450&amp;theme-id=1&amp;slug-hash=oNYxRXb&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNYxRXb\" title=\"CodePen Embed oNYxRXb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-straight-up-numbering\">Straight-up numbering<\/h3>\n\n\n<p>Because we can define types for numbers\u2014like <code>integer<\/code> and <code>number<\/code>\u2014that means we can also <em>animate<\/em> numbers instead of using those numbers as part of something else. <a href=\"https:\/\/css-tricks.com\/author\/carterli\/\">Carter Li<\/a> actually wrote an article on this <a href=\"https:\/\/css-tricks.com\/animating-number-counters\/\">right here on CSS-Tricks<\/a>. The trick is to use an <code>integer<\/code> in combination with CSS counters. This is similar to how we can work the counter in \u201cPure CSS\u201d games like this one.<\/p>\n\n\n\n<p>The use of <code>counter<\/code> and pseudo-elements provides a way to convert a number to a string. Then we can use that string for the <code>content<\/code> of a pseudo-element. Here are the important bits:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@property --milliseconds {\n  inherits: false;\n  initial-value: 0;\n  syntax: '&lt;integer>';\n}\n\n.counter {\n  counter-reset: ms var(--milliseconds);\n  animation: count 1s steps(100) infinite;\n}\n\n.counter:after {\n  content: counter(ms);\n}\n\n@keyframes count {\n  to {\n    --milliseconds: 100;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Which gives us something like this. Pretty cool.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYyxoPr\" src=\"\/\/codepen.io\/anon\/embed\/vYyxoPr?height=450&amp;theme-id=1&amp;slug-hash=vYyxoPr&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYyxoPr\" title=\"CodePen Embed vYyxoPr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Take that a <em>little<\/em> further and you\u2019ve got yourself a working stopwatch made with nothing but CSS and HTML. Click the buttons! The rad thing here is that this actually works as a timer. <a href=\"https:\/\/twitter.com\/jaffathecake\/status\/1362471942238961665?s=20\" rel=\"noopener\">It won\u2019t suffer from drift<\/a>. In some ways it may be more accurate than the JavaScript solutions we often reach for such as <code>setInterval<\/code>. Check out this <a href=\"https:\/\/www.youtube.com\/watch?v=MCi6AZMkxcU\" rel=\"noopener\">great video<\/a> from Google Chrome Developer about JavaScript counters.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOVmJBL\" src=\"\/\/codepen.io\/anon\/embed\/jOVmJBL?height=450&amp;theme-id=1&amp;slug-hash=jOVmJBL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOVmJBL\" title=\"CodePen Embed jOVmJBL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>What other things could you use animated numbers for? A countdown perhaps?<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-animated-gradients\">Animated gradients<\/h3>\n\n\n<p>You know the ones, <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-css-gradients\/\">linear, radial, and conic<\/a>. Ever been in a spot where you wanted to transition or animate the color stops? Well, <code>@property<\/code> can do that!<\/p>\n\n\n\n<p>Consider a gradient where we\u2018re creating some waves on a beach. Once we\u2019ve layered up some images we could make something like this.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  background-image:\n    linear-gradient(transparent 0 calc(35% + (var(--wave) * 0.5)), var(--wave-four) calc(75% + var(--wave)) 100%),\n    linear-gradient(transparent 0 calc(35% + (var(--wave) * 0.5)), var(--wave-three) calc(50% + var(--wave)) calc(75% + var(--wave))),\n    linear-gradient(transparent 0 calc(20% + (var(--wave) * 0.5)), var(--wave-two) calc(35% + var(--wave)) calc(50% + var(--wave))),\n    linear-gradient(transparent 0 calc(15% + (var(--wave) * 0.5)), var(--wave-one) calc(25% + var(--wave)) calc(35% + var(--wave))), var(--sand);\n}<\/code><\/pre>\n\n\n\n<p>There is quite a bit going on there. But, to break it down, we\u2019re creating each color stop with <code>calc()<\/code>. And in that calculation, we add the value of <code>--wave<\/code>. The neat trick here is that when we animate that <code>--wave<\/code> value, all the wave layers move.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvodwVz\" src=\"\/\/codepen.io\/anon\/embed\/wvodwVz?height=450&amp;theme-id=1&amp;slug-hash=wvodwVz&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvodwVz\" title=\"CodePen Embed wvodwVz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is all the code we needed to make that happen:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  animation: waves 5s infinite ease-in-out;\n}\n@keyframes waves {\n  50% {\n    --wave: 25%;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Without the use of <code>@property<\/code>, our waves would <a href=\"https:\/\/codepen.io\/jh3y\/pen\/GRNmRgp\" rel=\"noopener\">step between high and low tide<\/a>. But, with it, we get a nice chilled effect like this.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzpKKoN\" src=\"\/\/codepen.io\/anon\/embed\/YzpKKoN?height=450&amp;theme-id=1&amp;slug-hash=YzpKKoN&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzpKKoN\" title=\"CodePen Embed YzpKKoN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It\u2019s exciting to think other neat opportunities that we get when manipulating images. Like rotation. Or how about animating the angle of a <code>conic-gradient<\/code>\u2026 but, within a <code>border-image<\/code>. Bramus Van Damme does a <a href=\"https:\/\/www.bram.us\/2021\/01\/29\/animating-a-css-gradient-border\/\" rel=\"noopener\">brilliant job covering this concept<\/a>.<\/p>\n\n\n\n<p>Let\u2019s break it down by creating a charging indicator. We\u2019re going to animate an angle and a hue at the same time. We can start with two custom properties:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@property --angle {\n  initial-value: 0deg;\n  inherits: false;\n  syntax: '&lt;number>';\n}\n\n@property --hue {\n  initial-value: 0;\n  inherits: false;\n  syntax: '&lt;angle>';\n}<\/code><\/pre>\n\n\n\n<p>The animation will update the angle and hue with a slight pause on each iteration.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes load {\n  0%, 10% {\n    --angle: 0deg;\n    --hue: 0;\n  }\n  100% {\n    --angle: 360deg;\n    --hue: 100;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Now let\u2019s apply it as the <code>border-image<\/code> of an element.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.loader {\n  --charge: hsl(var(--hue), 80%, 50%);\n  border-image: conic-gradient(var(--charge) var(--angle), transparent calc(var(--angle) * 0.5deg)) 30;\n  animation: load 2s infinite ease-in-out;\n}<\/code><\/pre>\n\n\n\n<p>Pretty cool.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOVNOeg\" src=\"\/\/codepen.io\/anon\/embed\/jOVNOeg?height=450&amp;theme-id=1&amp;slug-hash=jOVNOeg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOVNOeg\" title=\"CodePen Embed jOVNOeg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Unfortunately, <code>border-image<\/code> doesn\u2018t play nice with <code>border-radius<\/code>. But, we could use a pseudo-element behind it. Combine it with the number animation tricks from before and we\u2019ve got a full charging\/loading animation. (Yep, it changes when it gets to 100%.)<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxRdbdE\" src=\"\/\/codepen.io\/anon\/embed\/xxRdbdE?height=450&amp;theme-id=1&amp;slug-hash=xxRdbdE&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxRdbdE\" title=\"CodePen Embed xxRdbdE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-transforms-are-cool-too\">Transforms are cool, too<\/h3>\n\n\n<p>One issue with animating transforms is transitioning between certain parts. It often ends up breaking or not looking how it should. Consider the classic example of a ball being throw. We want it to go from point A to point B while imitating the effect of gravity.<\/p>\n\n\n\n<p>An initial attempt might look like this<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes throw {\n  0% {\n    transform: translate(-500%, 0);\n  }\n  50% {\n    transform: translate(0, -250%);\n  }\n  100% {\n    transform: translate(500%, 0);\n  }\n}<\/code><\/pre>\n\n\n\n<p>But, we\u2019ll soon see that it doesn\u2019t look anything like we want.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWNRbdg\" src=\"\/\/codepen.io\/anon\/embed\/XWNRbdg?height=450&amp;theme-id=1&amp;slug-hash=XWNRbdg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWNRbdg\" title=\"CodePen Embed XWNRbdg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Before, we may have reached for wrapper elements and animated them in isolation. But, with <code>@property<\/code>, we can animate the individual values of the transform. And all on one timeline. Let\u2019s flip the way this works by defining custom properties and then setting a transform on the ball.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@property --x {\n  inherits: false;\n  initial-value: 0%;\n  syntax: '&lt;percentage>';\n}\n\n@property --y {\n  inherits: false;\n  initial-value: 0%;\n  syntax: '&lt;percentage>';\n}\n\n@property --rotate {\n  inherits: false;\n  initial-value: 0deg;\n  syntax: '&lt;angle>';\n}\n\n.ball {\n  animation: throw 1s infinite alternate ease-in-out;\n  transform: translateX(var(--x)) translateY(var(--y)) rotate(var(--rotate));\n}<\/code><\/pre>\n\n\n\n<p>Now for our animation, we can compose the transform we want against the keyframes:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes throw {\n  0% {\n    --x: -500%;\n    --rotate: 0deg;\n  }\n  50% {\n    --y: -250%;\n  }\n  100% {\n    --x: 500%;\n    --rotate: 360deg;\n  }\n}<\/code><\/pre>\n\n\n\n<p>The result? The curved path we had hoped for. And we can make that look different depending on the different timing functions we use. We could split the animation into three ways and use different timing functions. That would give us different results for the way the ball moves.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PobmqXq\" src=\"\/\/codepen.io\/anon\/embed\/PobmqXq?height=450&amp;theme-id=1&amp;slug-hash=PobmqXq&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PobmqXq\" title=\"CodePen Embed PobmqXq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Consider another example where we have a car that we want to drive around a square with rounded corners.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYyBKeW\" src=\"\/\/codepen.io\/anon\/embed\/vYyBKeW?height=450&amp;theme-id=1&amp;slug-hash=vYyBKeW&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYyBKeW\" title=\"CodePen Embed vYyBKeW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We can use a similar approach to what we did with the ball:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@property --x {\n  inherits: false;\n  initial-value: -22.5;\n  syntax: '&lt;number>';\n}\n\n@property --y {\n  inherits: false;\n  initial-value: 0;\n  syntax: '&lt;number>';\n}\n\n@property --r {\n  inherits: false;\n  initial-value: 0deg;\n  syntax: '&lt;angle>';\n}<\/code><\/pre>\n\n\n\n<p>The car\u2019s <code>transform<\/code> is using calculated with <code>vmin<\/code> to keep things responsive:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.car {\n  transform: translate(calc(var(--x) * 1vmin), calc(var(--y) * 1vmin)) rotate(var(--r));\n}<\/code><\/pre>\n\n\n\n<p>Now can write an extremely accurate frame-by-frame journey for the car. We could start with the value of <code>--x<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes journey {\n  0%, 100% {\n    --x: -22.5;\n  }\n  25% {\n    --x: 0;\n  }\n  50% {\n    --x: 22.5;\n  }\n  75% {\n    --x: 0;\n  }\n}<\/code><\/pre>\n\n\n\n<p>The car makes the right journey on the x-axis.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zYoOBWq\" src=\"\/\/codepen.io\/anon\/embed\/zYoOBWq?height=450&amp;theme-id=1&amp;slug-hash=zYoOBWq&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zYoOBWq\" title=\"CodePen Embed zYoOBWq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Then we build upon that by adding the travel for the y-axis:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes journey {\n  0%, 100% {\n    --x: -22.5;\n    --y: 0;\n  }\n  25% {\n    --x: 0;\n    --y: -22.5;\n  }\n  50% {\n    --x: 22.5;\n    --y: 0;\n  }\n  75% {\n    --x: 0;\n    --y: 22.5;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Well, that\u2019s not <em>quite<\/em> right.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdObELx\" src=\"\/\/codepen.io\/anon\/embed\/mdObELx?height=450&amp;theme-id=1&amp;slug-hash=mdObELx&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdObELx\" title=\"CodePen Embed mdObELx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Let\u2019s drop some extra steps into our <code>@keyframes<\/code> to smooth things out:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes journey {\n  0%, 100% {\n    --x: -22.5;\n    --y: 0;\n  }\n  12.5% {\n    --x: -22.5;\n    --y: -22.5;\n  }\n  25% {\n    --x: 0;\n    --y: -22.5;\n  }\n  37.5% {\n    --y: -22.5;\n    --x: 22.5;\n  }\n  50% {\n    --x: 22.5;\n    --y: 0;\n  }\n  62.5% {\n    --x: 22.5;\n    --y: 22.5;\n  }\n  75% {\n    --x: 0;\n    --y: 22.5;\n  }\n  87.5% {\n    --x: -22.5;\n    --y: 22.5;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Ah, much better now:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaQBzVG\" src=\"\/\/codepen.io\/anon\/embed\/BaQBzVG?height=450&amp;theme-id=1&amp;slug-hash=BaQBzVG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaQBzVG\" title=\"CodePen Embed BaQBzVG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>All that\u2018s left is the car\u2018s rotation. We\u2018re going with a 5% window around the corners. It\u2019s not precise but it definitely shows the potential of what\u2019s possible:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes journey {\n  0% {\n    --x: -22.5;\n    --y: 0;\n    --r: 0deg;\n  }\n  10% {\n    --r: 0deg;\n  }\n  12.5% {\n    --x: -22.5;\n    --y: -22.5;\n  }\n  15% {\n    --r: 90deg;\n  }\n  25% {\n    --x: 0;\n    --y: -22.5;\n  }\n  35% {\n    --r: 90deg;\n  }\n  37.5% {\n    --y: -22.5;\n    --x: 22.5;\n  }\n  40% {\n    --r: 180deg;\n  }\n  50% {\n    --x: 22.5;\n    --y: 0;\n  }\n  60% {\n    --r: 180deg;\n  }\n  62.5% {\n    --x: 22.5;\n    --y: 22.5;\n  }\n  65% {\n    --r: 270deg;\n  }\n  75% {\n    --x: 0;\n    --y: 22.5;\n  }\n  85% {\n    --r: 270deg;\n  }\n  87.5% {\n    --x: -22.5;\n    --y: 22.5;\n  }\n  90% {\n    --r: 360deg;\n  }\n  100% {\n    --x: -22.5;\n    --y: 0;\n    --r: 360deg;\n  }\n}<\/code><\/pre>\n\n\n\n<p>And there we have it, a car driving around a curved square! No wrappers, no need for complex Math. And we composed it all with custom properties.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOVNqjv\" src=\"\/\/codepen.io\/anon\/embed\/jOVNqjv?height=450&amp;theme-id=1&amp;slug-hash=jOVNqjv&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOVNqjv\" title=\"CodePen Embed jOVNqjv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-powering-an-entire-scene-with-variables\">Powering an entire scene with variables<\/h3>\n\n\n<p>We\u2018ve seen some pretty neat <code>@property<\/code> possibilities so far, but putting everything we\u2019ve looked at here together can take things to another level. For example, we can power entire scenes with just a few custom properties.<\/p>\n\n\n\n<p>Consider the following concept for a 404 page. Two registered properties power the different moving parts. We have a moving gradient that\u2019s clipped with <code>-webkit-background-clip<\/code>. The shadow moves by reading the values of the properties. And we swing another element for the light effect.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWbvzKb\" src=\"\/\/codepen.io\/anon\/embed\/MWbvzKb?height=600&amp;theme-id=1&amp;slug-hash=MWbvzKb&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWbvzKb\" title=\"CodePen Embed MWbvzKb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-that-s-it\">That\u2019s it!<\/h3>\n\n\n<p>It\u2019s exciting to think about what types of things we can do with the ability to define types with <code>@property<\/code>. By giving the browser additional context about a custom property, we can go nuts in ways we couldn\u2019t before with basic strings.<\/p>\n\n\n\n<p>What ideas do you have for the other types? Time and resolution would make for interesting transitions, though I\u2019ll admit I wasn\u2019t able to make them work that way I was hoping. <code>url<\/code> could also be neat, like perhaps transitioning between a range of sources the way an image carousel typically does. Just brainstorming here!<\/p>\n\n\n\n<p>I hope this quick look at <code>@property<\/code> inspires you to go check it out and make your own awesome demos! I look forward to seeing what you make. In fact, please share them with me here in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uh, what\u2019s @property? It\u2019s a new CSS feature! It gives you superpowers. No joke, there is stuff that @property can do that unlocks things in CSS we\u2019ve never been able to do before. While everything about @property is exciting, perhaps the most interesting thing is that it provides a way to specify a type for [&hellip;]<\/p>\n","protected":false},"author":265369,"featured_media":335209,"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":"Here's @jh3yy exploring @property and its animating powers","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[14385,708,1036],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/stopwatch.gif?fit=900%2C450&ssl=1","jetpack-related-posts":[{"id":320196,"url":"https:\/\/css-tricks.com\/using-property-for-css-custom-properties\/","url_meta":{"origin":335207,"position":0},"title":"Using @property for CSS Custom Properties","date":"September 2, 2020","format":false,"excerpt":"Una Kravetz digs into how Chrome now allows you to declare CSS custom properties directly from CSS with more information than just a string. So rather than something like this: html { --stop: 50%; } ...can be declared with more details like this: @property --stop { syntax: \"<percentage>\"; initial-value: 50%;\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/at-property.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":337648,"url":"https:\/\/css-tricks.com\/css-is-a-strongly-typed-language\/","url_meta":{"origin":335207,"position":1},"title":"CSS is a Strongly Typed Language","date":"April 13, 2021","format":false,"excerpt":"One of the ways you can classify a programming language is by how strongly or weakly typed it is. Here, \u201ctyped\u201d means if variables are known at compile time. An example of this would be a scenario where an integer (1) is added to a string containing an integer (\"1\"):\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-typed-language.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333595,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/","url_meta":{"origin":335207,"position":2},"title":"A Complete Guide to Custom Properties","date":"April 27, 2021","format":false,"excerpt":"Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as \"CSS Variables\" but that's not their real name.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312969,"url":"https:\/\/css-tricks.com\/using-custom-property-stacks-to-tame-the-cascade\/","url_meta":{"origin":335207,"position":3},"title":"Using Custom Property &#8220;Stacks&#8221; to Tame the Cascade","date":"June 22, 2020","format":false,"excerpt":"Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features but, as authors, we've had very little control over how they interact. Selector specificity and source order provide some minimal \"layering\" control, without a lot of nuance\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/custom-property-stacks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":341572,"url":"https:\/\/css-tricks.com\/are-custom-properties-a-menu-of-what-will-change\/","url_meta":{"origin":335207,"position":4},"title":"Are Custom Properties a &#8220;Menu of What Will Change&#8221;?","date":"June 2, 2021","format":false,"excerpt":"PPK laid out an interesting situation in \"Two options for using custom properties\" where he and Stefan Judis had two different approaches for doing the same thing with custom properties. In one approach, hover and focus styles for a link are handled with two different custom properties, one for each\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/custom-property-componentcolor.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":319272,"url":"https:\/\/css-tricks.com\/can-you-get-valid-css-property-values-from-the-browser\/","url_meta":{"origin":335207,"position":5},"title":"Can you get valid CSS property values from the browser?","date":"August 18, 2020","format":false,"excerpt":"I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this. CodePen Embed Fallback That gives you, for example, the fact that cursor is a thing. But then how do you know what\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/mouse-cursor.jpg?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/stopwatch.gif?fit=900%2C450&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/335207"}],"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\/265369"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=335207"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/335207\/revisions"}],"predecessor-version":[{"id":335317,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/335207\/revisions\/335317"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/335209"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=335207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=335207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=335207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}