Transition Total Duration Multi-Property Sum
Parallel property-transition completion is max(duration+delay,0), not sum; separately expose serial-sum diagnostic, negative delays supported. List repetition/cancellation external. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Concurrent transitions complete at their latest active end time.
Concurrent transitions complete at their latest active end time.1
Adding every duration describes a separate serial scenario rather than the elapsed time of concurrent properties. Use Transition Total Duration Multi-Property Sum to evaluate the supplied inputs under the specific model below.
When to use Transition Total Duration Multi-Property Sum
Use Transition Total Duration Multi-Property Sum to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use Transition Total Duration Multi-Property Sum and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Transition durations seconds, Transition delays seconds using the field table and validation rules below, then run the tool.
- Read Active end times seconds, Concurrent completion seconds, Serial sum seconds and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| transitionDurationsSeconds | Transition durations seconds | array of number | Required; constraints below |
| transitionDelaysSeconds | Transition delays seconds | array of number | Required; constraints below |
Enter aligned nonempty nonnegative durations and finite signed delays in seconds. Each active end is max(0,duration+delay). Return the largest end for concurrent properties and the sum of ends for a separate serial scenario. The sum is not the elapsed duration of simultaneous transitions, and no computed-style or event timing is measured.
end[i] = max(0,duration[i]+delay[i]); concurrent = max(end); serial = Σend Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| activeEndTimesSeconds | Active end times seconds | array of number |
| concurrentCompletionSeconds | Concurrent completion seconds | number |
| serialSumSeconds | Serial sum seconds | number |
{
"input": {
"transitionDurationsSeconds": [
1,
2
],
"transitionDelaysSeconds": [
0.5,
-0.5
]
},
"output": {
"activeEndTimesSeconds": [
1.5,
1.5
],
"concurrentCompletionSeconds": 1.5,
"serialSumSeconds": 3
}
}Limitations and assumptions
Adding every duration describes a separate serial scenario rather than the elapsed time of concurrent properties. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use Animation Loop Total Runtime for a related task: Finite animation runtime depends on duration, iterations and delay.
Use flex:1 Shorthand Expansion for a related task: The flex shorthand combines growth, shrinkage and basis components.
References
Similar or alternative tools
- Animation Loop Total Runtime
Finite animation runtime depends on duration, iterations and delay.
- flex:1 Shorthand Expansion
The flex shorthand combines growth, shrinkage and basis components.