# MotionCss

<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-keyword">module</span> <span class="tok-type">MotionCss</span></code></pre>

| | |
|---|---|
| Assembly | `Partas.Nacara.Plugins.Motion` |

Hovers compiled to CSS transitions.

## Functions and values

<div class="nacara-api__entry" id="duration">
<a class="nacara-api__anchor"
                           href="#duration"
                           aria-label="Link to duration"
                           data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">duration</span> <span class="tok-punctuation">(</span><span class="tok-parameter">hover</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Partas.Nacara.Plugins/reference/partas-nacara-plugins-motion/nacara-plugins/hover/">Hover</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <span class="tok-type">int</span></code></pre>
</summary>
<div class="nacara-api__body">

The milliseconds a hover plays over.

A cubic or linear easing plays over its `DurationMs`, a spring over its settling time and a preset over `1200`.


</div>
</details>
</div>

<div class="nacara-api__entry" id="easing">
<a class="nacara-api__anchor"
                           href="#easing"
                           aria-label="Link to easing"
                           data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">easing</span> <span class="tok-punctuation">(</span><span class="tok-parameter">easing</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Partas.Nacara.Plugins/reference/partas-nacara-plugins-motion/nacara-plugins/easing/">Easing</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <span class="tok-type">string</span></code></pre>
</summary>
<div class="nacara-api__body">

The CSS easing: `linear`, `cubic-bezier()` or a spring's `linear()`.


</div>
</details>
</div>

<div class="nacara-api__entry" id="hover">
<a class="nacara-api__anchor"
                           href="#hover"
                           aria-label="Link to hover"
                           data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">hover</span> <span class="tok-punctuation">(</span><span class="tok-parameter">hover</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Partas.Nacara.Plugins/reference/partas-nacara-plugins-motion/nacara-plugins/hover/">Hover</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <span class="tok-type">string</span></code></pre>
</summary>
<div class="nacara-api__body">

The rules for one hover.


</div>
</details>
</div>

<div class="nacara-api__entry" id="stylesheet">
<a class="nacara-api__anchor"
                           href="#stylesheet"
                           aria-label="Link to stylesheet"
                           data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">stylesheet</span> <span class="tok-punctuation">(</span><span class="tok-parameter">policy</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Partas.Nacara.Plugins/reference/partas-nacara-plugins-motion/nacara-plugins/reducedmotion/">ReducedMotion</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">hovers</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Partas.Nacara.Plugins/reference/partas-nacara-plugins-motion/nacara-plugins/hover/">Hover</a> <span class="tok-type">list</span><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <span class="tok-type">string</span></code></pre>
</summary>
<div class="nacara-api__body">

The stylesheet for the hovers, under a reduced-motion policy.


</div>
</details>
</div>

<div class="nacara-api__entry" id="value">
<a class="nacara-api__anchor"
                           href="#value"
                           aria-label="Link to value"
                           data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">value</span> <span class="tok-punctuation">(</span><span class="tok-parameter">value</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Partas.Nacara.Plugins/reference/partas-nacara-plugins-motion/nacara-plugins/motionvalue/">MotionValue</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <span class="tok-type">string</span></code></pre>
</summary>
<div class="nacara-api__body">

The CSS value: a token as `var(--first-last, fallback)`, a literal as written.

A token without a fallback is `var(--first-last)`.


</div>
</details>
</div>