p]:inline” data-streamdown=”list-item”>Quick Start: Installing and Configuring ntSentinel

-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;

This article explains the CSS-style custom properties shown in the title, what they do, when to use them, and practical examples for implementing them in modern web projects.

What these properties represent

• -sd-animation: a custom property likely used by a design system or component library to select an animation preset (here, sd-fadeIn).
• –sd-duration: custom property defining the animation duration in milliseconds (0ms in the title).
• –sd-easing: custom property defining the timing function (ease-in).

These are not native CSS animation properties themselves; instead, they act as variables that a stylesheet or JavaScript component can read and apply to actual CSS animation or transition rules. Using custom properties like these makes themes and component behaviors configurable without changing underlying CSS.

Typical usage patterns

1. Theme/configuration variables
   • Centralize animation presets in a root or theme stylesheet, letting components pick a preset by setting -sd-animation.
2. Component-level overrides
   • Allow single components to override duration or easing for accessibility or contextual reasons (e.g., instant opening with 0ms).
3. JavaScript-driven animation engines
   • Read these CSS variables from computed styles and drive Web Animations API or libraries (GSAP, anime.js).

Important details about the example values

• sd-fadeIn — implies a fade-in effect. The actual keyframes must be defined elsewhere, for example:
  css

  @keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}

• –sd-duration: 0ms; — means the animation will have zero duration; effectively it will jump to the end state immediately. Useful for disabling animations (e.g., respecting “prefers-reduced-motion”) or for initial renders where animation is not desired.
• –sd-easing: ease-in; — a standard CSS timing function; combined with zero duration it has no visible effect. With positive durations, it produces a slow start then speed up.

Accessibility considerations

• If –sd-duration is set to 0ms globally or for users who prefer reduced motion, that respects users sensitive to motion. Detect prefers-reduced-motion and set duration to 0ms accordingly.
• Provide a way for users to opt out of animations (e.g., a setting that sets –sd-duration: 0ms).

Example: component CSS using these variables

:root {  –sd-duration: 200ms;  –sd-easing: ease-out;  -sd-animation: sd-fadeIn;}
.my-component {  animation-name: var(-sd-animation);  animation-duration: var(–sd-duration);  animation-timing-function: var(–sd-easing);  animation-fill-mode: both;}

To respect reduced motion:

@media (prefers-reduced-motion: reduce) {  :root { –sd-duration: 0ms; }}

When to set duration to 0ms

• For initial render snapshots where you want final state immediately.
• For users preferring reduced motion.
• For transitions you want to disable conditionally (e.g., in tests to avoid flakiness).

Best practices

• Keep meaningful default durations (100–300ms) for micro-interactions.
• Use custom properties for easy theming and runtime changes.
• Map preset names like sd-fadeIn to keyframes centrally to avoid duplication.
• Ensure zero-duration cases still result in accessible, readable state changes.

Conclusion

These custom properties give designers and developers flexible control over animations without modifying core styles. The specific title values indicate a fade-in preset with animation disabled (0ms), which is useful for accessibility or instant state changes. Implement them centrally, respect user preferences, and document preset behaviors for consistent usage across your codebase.