.dcss-motion

Moves an element every frame by the acceleration you write, on a store.css frame cell.

Example

Result
Markup
<link rel="stylesheet" href="store.css">
<link rel="stylesheet" href="dcss.css">
<link rel="stylesheet" href="families/motion.css">

<div data-store class="dcss-motion spring">
  <b class="dot"></b>
  <output class="kept"></output>
</div>
CSS
.spring { --dcss-motion-start-position: 100; --dcss-motion-acceleration: calc(-1 * pi * pi * var(--dcss-motion-position)); }
.spring .dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; translate: calc(100px + var(--dcss-motion-position) * 1px) 0; }
.spring .kept::after { counter-reset: k calc(round(hypot(var(--dcss-motion-position), var(--dcss-motion-speed) / pi))); content: counter(k); }

Browser support

BrowserSupport
ChromeYes
SafariYes
FirefoxWhole numbers only