Time unit for all Transitions

Create a transition for a list of properties:

Transition.properties
    [ Transition.opacity 200 [ Transition.delay 100 ]
    , Transition.color 500 [ Transition.easeInOut ]
    ]

Will render a CSS transition: opacity 200ms ease 100ms, color 500ms ease-in-out 0ms.

Create a transition with the same duration, ease and delay for all properties:

Transition.all
    { duration = 500
    , options = [ Transition.delay 200, Transition.linear ]
    }
    [ Transition.opacity
    , Transition.color
    ]

Will render a CSS transition: opacity 500ms linear 200ms, color 500ms linear 200ms.

Delay the start of the transition by a number of milliseconds.

Create a custom transition property (for any CSS attribute) - use with care as they may result in janky transitions!

e.g. for SVG fill:

property "fill" 500 []