p]:inline” data-streamdown=”list-item”>Troubleshooting: Apple Wireless Keyboard with Wired Keyboards — Common Fixes

These look like custom CSS properties and a (likely) custom shorthand for controlling an element’s entrance animation. Breakdown:

• -sd-animation: sd-fadeIn;
  • Appears to be a custom property (prefixed with a hyphen) specifying which animation to apply; “sd-fadeIn” is the animation name (keyframes) defined elsewhere.
• –sd-duration: 250ms;
  • Custom property defining the animation duration (250 milliseconds).
• –sd-easing: ease-in;
  • Custom property defining the timing function for the animation.

How they’re typically used

• Define keyframes for sd-fadeIn, e.g.:
  @keyframes sd-fadeIn {from { opacity: 0; transform: translateY(6px); }  to   { opacity: 1; transform: translateY(0); }}

• Apply the custom properties in a rule that maps them to shorthand animation:
  .animate {  animation-name: var(–sd-animation);  animation-duration: var(–sd-duration, 300ms);  animation-timing-function: var(–sd-easing, ease);  animation-fill-mode: both;}

• Or with a custom property named with single hyphen (-sd-animation) you’d reference it same way:
  .animate {  animation-name: var(–sd-animation);  /* or var(-sd-animation) if author used single hyphen—but standard is double hyphen */}

Notes and gotchas

• Standard custom properties must start with two dashes (–). A single-leading-hyphen token like ”-sd-animation” is invalid as a custom property; use –sd-animation instead.
• Ensure the keyframes name matches the animation-name value.
• Provide sensible fallbacks when using var().
• For accessibility, keep animations short and respect prefers-reduced-motion.

If you want, I can:

• Convert these into a ready-to-use CSS snippet,
• Create alternative easing/duration presets,