These look like custom CSS properties (variables) and a shorthand/custom property name used to control a simple animation. Explanation:
- -sd-animation: sd-fadeIn;
- Likely a custom (vendor-prefixed-style) property naming convention for an animation assignment.
- Value “sd-fadeIn” is the name of a keyframes animation (e.g., @keyframes sd-fadeIn { from { opacity:0 } to { opacity:1 } }).
- –sd-duration: 250ms;
- A CSS custom property defining animation duration: 250 milliseconds.
- Can be referenced as var(–sd-duration) in animation declarations.
- –sd-easing: ease-in;
- A CSS custom property for animation timing function (easing), here ease-in.
How they’re used together (example):
.element {animation-name: var(-sd-animation); /* or animation: var(-sd-animation) var(–sd-duration) var(–sd-easing) both; */ animation-duration: var(–sd-duration); animation-timing-function: var(–sd-easing);}@keyframes sd-fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); }}Notes and tips:
- Standard CSS custom properties must start with –. The property -sd-animation is nonstandard; using –sd-animation is recommended for consistency and to allow var(–sd-animation).
- If you keep -sd-animation, it cannot be referenced by var(); animation-name expects an identifier or var(–name). Use animation: var(–sd-animation) … or animation-name: sd-fadeIn.
- Include animation-fill-mode (e.g., both or forwards) if you want the end state retained.
- For accessibility, keep durations reasonable and prefer reduced-motion support:
@media (prefers-reduced-motion: reduce) { .element { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }}
Leave a Reply