Animation
Animation tokens provide basic timings for animations and hook into theme support for reduced motion.
| Token | Value | Description | Demo | |
| --nve-ref-animation-duration-100 | --0 | Use for instant transitions or reduced motion preferences | |
| --nve-ref-animation-duration-150 | --150ms | Use for quick UI transitions | |
| --nve-ref-animation-duration-200 | --200ms | Use for standard UI transitions | |
| --nve-ref-animation-duration-250 | --250ms | Use for slightly slower transitions | |
| --nve-ref-animation-duration-300 | --400ms | Use for slower, deliberate transitions | |
| --nve-ref-animation-duration-400 | --800ms | Use for very slow, dramatic transitions | |
| --nve-ref-animation-easing-100 | --ease-in-out | Use for smooth transitions | |
Reduced Motion
Reduced-motion theme setting that disables animations for accessibility.
<style>
@keyframes slide-demo {
0% {
left: 0;
}
50% {
left: calc(100% - 25px);
}
100% {
left: 0;
}
}
.animation,
.animation[nve-theme] {
width: 150px;
height: 50px;
border: 1px solid #ccc;
position: relative;
padding: 0;
}
.animation div {
width: 20px;
height: 50px;
background-color: #ccc;
animation: slide-demo var(--nve-ref-animation-duration-400);
animation-timing-function: var(--nve-ref-animation-easing-100);
animation-iteration-count: infinite;
animation-delay: 500ms;
width: 25px;
height: 50px;
position: absolute;
left: 0;
}
</style>
<div nve-layout="row gap:md">
<section nve-layout="column gap:sm">
<code>nve-theme</code>
<div class="animation" nve-theme>
<div></div>
</div>
</section>
<section nve-layout="column gap:sm">
<code>nve-theme="reduced-motion"</code>
<div class="animation" nve-theme="reduced-motion">
<div></div>
</div>
</section>
</div>
<style>
@keyframes slide-demo {
0% {
left: 0;
}
50% {
left: calc(100% - 25px);
}
100% {
left: 0;
}
}
.animation,
.animation[nve-theme] {
width: 150px;
height: 50px;
border: 1px solid #ccc;
position: relative;
padding: 0;
}
.animation div {
width: 20px;
height: 50px;
background-color: #ccc;
animation: slide-demo var(--nve-ref-animation-duration-400);
animation-timing-function: var(--nve-ref-animation-easing-100);
animation-iteration-count: infinite;
animation-delay: 500ms;
width: 25px;
height: 50px;
position: absolute;
left: 0;
}
</style>
<div nve-layout="row gap:md">
<section nve-layout="column gap:sm">
<code>nve-theme</code>
<div class="animation" nve-theme>
<div></div>
</div>
</section>
<section nve-layout="column gap:sm">
<code>nve-theme="reduced-motion"</code>
<div class="animation" nve-theme="reduced-motion">
<div></div>
</div>
</section>
</div>
nve-theme="reduced-motion"