Skip to content

Main content

CSS Animation List Slot Pairing

Pair explicit animation names with cyclic duration/delay lists; no shorthand parsing, timing interpolation or special all/none expansion.

Loading tool…

Description

Pair explicit animation names with cyclic duration/delay lists; no shorthand parsing, timing interpolation or special all/none expansion.

CSS combines token syntax, property-specific value rules and layout/cascade processing. These are separate layers: splitting a declaration does not establish that its value is valid, and arithmetic on resolved lengths does not perform browser layout. Each tool here handles an explicit numeric representation or a stated lexical subset.

Pair explicit animation names with cyclic duration/delay lists; no shorthand parsing, timing interpolation or special all/none expansion.

When to use this tool

Use this tool to pair explicit animation names with cyclic duration/delay lists; no shorthand parsing, timing interpolation or special all/none expansion.

How to use the tool and how it works

  1. Enter names, durations, delays using the input definitions below.
  2. Run the operation. Resolve malformed-input errors before interpreting the result.
  3. Read result.slots. Interpret signs, units, ordering and null values using the rules below.

Require nonempty duration and delay lists and nonnegative durations. Pair each animation name with cyclic duration and delay entries at its index.1, 2

Input fieldMeaning and unitsAccepted input
namesAnimation names in slot order, supplied literally.Dense list of at most 128 strings, each at most 8,192 UTF-16 code units.
durationsNonempty nonnegative durations in one common time unit.Dense list of at most 128 finite numbers, subject to the stated integer/shape rules.
delaysNonempty signed delays in the same time unit as durations.Dense list of at most 128 finite numbers, subject to the stated integer/shape rules.
Output fieldInterpretation
resultObject containing the fields below.
result.slotsInput-order name/duration/delay records after independent list cycling.
json
{
  "input": {
    "names": [
      "a",
      "b",
      "c"
    ],
    "durations": [
      1,
      2
    ],
    "delays": [
      0
    ]
  },
  "output": {
    "result": {
      "slots": [
        {
          "name": "a",
          "duration": 1,
          "delay": 0
        },
        {
          "name": "b",
          "duration": 2,
          "delay": 0
        },
        {
          "name": "c",
          "duration": 1,
          "delay": 0
        }
      ]
    }
  }
}

Limitations and assumptions

  • Use consistent time units; negative delays are retained and names are supplied literal strings, without shorthand parsing or animation execution.
  • Lengths and times must already be resolved to consistent numeric units. Lexical helpers intentionally support smaller grammars than a full browser CSS parser; malformed supported-subset input causes an error.
  • Every declared top-level input is required and unknown fields are rejected. Ordinary strings are limited to 8,192 UTF-16 code units and lists to 128 entries, with tighter operation-specific bounds where stated. JSON text has bounded nesting and node counts.
  • Numeric outputs must be finite and within the absolute safe-integer magnitude; exact larger integers use decimal text. Source positions are zero-based UTF-16 offsets and span ends are exclusive unless a different convention is explicitly stated.

Alternative or Complementary methods

Use a full CSS parser or browser style/layout APIs when escape handling, error recovery, computed styles or the full cascade matter. These tools expose focused transformations and audits of supplied data.

References

  1. CSS Animations Level 1 — W3C

  2. Tool behavior and example: CSS Animation List Slot Pairing — tool.io

Similar or alternative tools

  • CSS Transition Property Slot Pairing

    Pair explicit transition properties with cyclic duration/delay lists; no shorthand parsing, timing interpolation or special all/none expansion.

  • CSS Declaration List Tokenizer

    Tokenize a restricted CSS declaration list with UTF-16 source spans and balanced strings/groups; comments and escaped property identifiers are unsupported.