LEARN / OPTIONAL MODULES

Motion and animations

Shared motion controls accordion expansion, rotating indicators and gliding highlights in the core. An optional CSS file adds entrances for dropdowns, navigation panels and other native popovers. No JavaScript or extra animation classes are needed.

Default gliding highlights

Tabs include shared underlines; desktop top-level navigation and pagination use a gliding hover background. Submenus use static hover and focus styling. These effects are included in the core and their dedicated component modules. Tabs follow the selected choice; navigation and pagination follow hover or visible keyboard focus, returning to a current-page item when present. Pagination keeps its current-page styling throughout. This enhancement requires CSS anchor positioning and anchor-scope; other browsers keep static state styling.

No optional motion file is needed for these highlights. The existing parent data-motion setting controls glide duration, and reduced-motion preferences remove the transition. The optional file below adds popover entrances separately.

Enable the optional module

Load the motion extension after your core stylesheet. Put the html configuration on the opening html tag of your document, with the stylesheet links inside head.

<!doctype html>
<html lang="en" data-theme="auto" data-motion="subtle">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My interface</title>
  <link rel="stylesheet" href="/assets/reva/reva.css">
  <!-- Optional; load after the core. -->
  <link rel="stylesheet" href="/assets/reva/reva.motion.css">
</head>
<body>
  <!-- Supported popovers inherit the page motion setting. -->
</body>
</html>

The complete core and component bundles do not include this extension. The documentation opts in, so its top navigation also demonstrates the entrance. Glass and motion can be used together with their matching core build.

Compare the shared intensity settings

Open each dropdown to compare the entrances. The row supplies subtle motion; nearer values select expressive or none. Reduced-motion preferences override both animated settings.

<section class="row" data-motion="subtle">
  <div>
    <button type="button" popovertarget="motion-subtle">Subtle entrance</button>
    <ul class="dropdown" id="motion-subtle" popover="auto"
        role="list" aria-label="Subtle resources">
      <li><button type="button" popovertarget="motion-subtle"
                  popovertargetaction="hide" autofocus>Close resources</button></li>
      <li><a href="/RevaCSS/guide/">Get started</a></li>
      <li><a href="/RevaCSS/reference/">API reference</a></li>
    </ul>
  </div>
  <div data-motion="expressive">
    <button type="button" popovertarget="motion-expressive">Expressive entrance</button>
    <ul class="dropdown" id="motion-expressive" popover="auto"
        role="list" aria-label="Expressive resources">
      <li><button type="button" popovertarget="motion-expressive"
                  popovertargetaction="hide" autofocus>Close resources</button></li>
      <li><a href="/RevaCSS/components/dropdowns/">Dropdown documentation</a></li>
      <li><a href="/RevaCSS/themes/glass/">Glass material</a></li>
    </ul>
  </div>
  <div data-motion="none">
    <button type="button" popovertarget="motion-none">No entrance motion</button>
    <ul class="dropdown" id="motion-none" popover="auto"
        role="list" aria-label="Stationary resources">
      <li><button type="button" popovertarget="motion-none"
                  popovertargetaction="hide" autofocus>Close resources</button></li>
      <li><a href="/RevaCSS/guide/accessibility/">Behaviour and accessibility</a></li>
    </ul>
  </div>
</section>

Setting	Duration	Entrance
`data-motion="none"`	0ms	Immediate display; no fade, slide or scale.
`data-motion="subtle"`	140ms	Fade, .35rem vertical offset and scale from .985 to 1. Default.
`data-motion="expressive"`	240ms	Fade, .6rem vertical offset and scale from .97 to 1.

Use the same motion with native popovers

No component class is needed to opt this panel into motion. Its existing popover attribute identifies the supported surface; its parent sets the intensity.

<section data-motion="subtle">
  <button type="button" popovertarget="motion-information">Open information</button>
  <aside id="motion-information" popover="auto"
         aria-labelledby="motion-information-title">
    <h3 id="motion-information-title">Ordinary HTML, native behaviour</h3>
    <p>Motion adds presentation. The browser still owns opening and dismissal.</p>
    <button type="button" popovertarget="motion-information"
            popovertargetaction="hide" autofocus>Close information</button>
  </aside>
</section>

Accordion expansion and collapse

Included in the core and accordion component module; the optional motion extension is not required. Keep the existing details and summary markup and configure the parent once.

Does motion need JavaScript?

No. Native details owns the open state; CSS enhances expansion, collapse and the indicator.

Can I turn it off locally?

Put data-motion="none" on a nearer parent to remove transitions.

<section data-motion="expressive">
  <div class="accordion">
    <details>
      <summary>Does motion need JavaScript?</summary>
      <p>No. Native details owns the open state; CSS enhances expansion,
         collapse and the indicator.</p>
    </details>
    <details>
      <summary>Can I turn it off locally?</summary>
      <p>Put data-motion="none" on a nearer parent to remove transitions.</p>
    </details>
  </div>
</section>

none changes content and the chevron immediately. subtle expands and collapses with a rotating chevron over 140ms. expressive uses 240ms and adds a gentle content fade. Browsers supporting ::details-content, interpolate-size: allow-keywords and discrete transitions animate the content; other browsers retain instant native disclosure. Reduced motion disables all accordion transitions. Ordinary details outside .accordion keep their existing styling.

See all accordion examples. Browser and actual-device validation of this enhancement remains deferred until requested.

Override only exceptions

Keep the panel inside its configured DOM parent, even though the browser paints it in the top layer. No motion attribute is repeated on individual links or buttons.

<section data-motion="expressive">
  <!-- A nearer value changes only this branch. -->
  <div data-motion="none">
    <button type="button" popovertarget="motion-local">Open without motion</button>
    <ul class="dropdown" id="motion-local" popover="auto"
        role="list" aria-label="Local resources">
      <li><a href="/RevaCSS/guide/styling/">Styling and inheritance</a></li>
    </ul>
  </div>
</section>

Behaviour and preferences

The optional popover module animates entrances only. Closing is immediate; no display or overlay transition delays native dismissal.
Outside-click, Escape, focus and popover stacking retain native behaviour. Motion adds no focus management or ARIA application-menu interaction.
prefers-reduced-motion: reduce removes all entrance transitions, including when a local branch requests expressive motion. Forced colours and print also disable the effect.
Browsers without @starting-style display popovers immediately. The regular visible state is never held transparent while waiting for JavaScript.
Only opacity, translation and scale change in the optional popover extension. This module does not animate blur, shadows, layout dimensions or backdrop filters.
Dialogs, scroll reveals, card entrances and exit effects are outside this first module. Existing spinner, skeleton and edge motion keep their own behaviour.

The entrance uses CSS @starting-style when a popover becomes visible. The module owns the popover's opacity, translate, scale and transition declarations; custom effects should override those deliberately rather than stacking another entrance on the same panel.

This is an implemented development feature. Browser, actual-device and assistive-technology validation remains deferred until the release checks are requested.

Match the scoped build

Use the scoped motion extension with the scoped core. Keep each popover inside its .reva boundary and use unique target ids.

<link rel="stylesheet" href="/assets/reva/reva.scoped.css">
<link rel="stylesheet" href="/assets/reva/reva.motion.scoped.css">

<section class="reva" data-theme="dark" data-motion="subtle">
  <button type="button" popovertarget="scoped-motion-links">Resources</button>
  <ul class="dropdown" id="scoped-motion-links" popover="auto"
      role="list" aria-label="Scoped resources">
    <li><a href="/docs/">Documentation</a></li>
  </ul>
</section>

Dropdown markup · Top navigation · Stylesheet API