能否在CSS calc()内为数值添加单位？及动画速度计算问题

Hey there! Let's tackle your questions one by one—this is a great use case for CSS variables combined with dynamic calculations.

1. Achieving Fixed Animation Speed (px/s) #

Your goal is to make the animation move at a consistent pixels-per-second rate, which means the animation duration needs to scale with the total distance being traveled (your --offset value).

First, let's clarify the math:

Duration (seconds) = Total Distance (pixels) ÷ Speed (pixels/second)

For example, if you want a speed of 500px/s, a 1000px offset would need a 2-second duration (1000 / 500 = 2).

Here's how to adjust your code properly (fixing unit compatibility issues):

Option 1: Use a unitless --offset variable (cleanest approach) #

Set the variable without units in JavaScript, then apply units where needed in CSS:

// Assume `offset` is a number like 1500 (no "px" suffix)
document.documentElement.style.setProperty('--offset', offset);

Then in your CSS:

@keyframes upanim {
  from {
    /* Convert unitless offset to pixels for the transform */
    transform: translate3d(0, calc(var(--offset) * 1px - 100vh), 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.your-target-element {
  /* Calculate duration: offset (unitless) ÷ speed (px/s) → seconds */
  animation: upanim calc(var(--offset) / 500 * 1s) linear forwards;
  /* `linear` ensures constant speed; `forwards` keeps the final state */
}

Option 2: Keep --offset with px units #

If you prefer keeping the px suffix in the variable, you'll need to convert it to a unitless value first in the calc:

// `offset` is a number, add "px" suffix
document.documentElement.style.setProperty('--offset', `${offset}px`);

CSS adjustment:

.your-target-element {
  /* Divide by 1px to strip the unit, then calculate duration */
  animation: upanim calc( (var(--offset) / 1px) / 500 * 1s ) linear forwards;
}

2. Adding Units Inside CSS calc() #

Absolutely! You can add units to numerical values inside calc(), but you need to follow CSS's unit arithmetic rules:

• ✅ Valid: Attach units to unitless values (e.g., calc(20 * 1rem) becomes 20rem, calc(5 * 0.2s) becomes 1s).
• ❌ Invalid: Add units to already unitized values (e.g., calc(10px * 1px) creates px², which CSS doesn't recognize).
• ✅ Valid: Convert units via division/multiplication (e.g., var(--offset-px) / 1px turns 1000px into the unitless number 1000).

Examples of valid unit handling in calc():

/* Convert unitless value to pixels */
padding: calc(var(--spacing) * 1px);
/* Calculate time from pixel distance */
animation-duration: calc( (var(--distance-px) / 1px) * 0.002s );

内容的提问来源于stack exchange，提问作者Himmators