Transition properties

Transition properties

Set a time delay before the transition will start.

Expected value:

• Number. This will be interpreted as milliseconds

Accepted units:

• Blank - The value will be converted to milliseconds
• ms - The value will be applied in milliseconds
• s - the value will be applied in seconds

Easing

Set the transition timing function. This sets an acceleration curve, so that the speed of the transition can vary over its duration.

Options

• Ease - transition effect with a slow start, then fast, then end slowly
• Linear - Don't apply any easing
• Ease-in - transition effect with a slow start 
• Ease out - transition effect with a slow end
• Ease in-out -  transition effect with a slow start and end

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

Adding multiple transitions

You can add multiple transitions to an element and set them to different timing and easing. For example, you can transition the background color of and element and then, transition the height of an element.

To add multiple transitions:

1. Click the Add transition button below the current transition properties
2. A new row of transition fields will appear
3. Add the new transition properties.

Delay (ms)

Set a time delay before the transition will start.

Expected value:

• Number. This will be interpreted as milliseconds

Accepted units:

• Blank - The value will be converted to milliseconds
• ms - The value will be applied in milliseconds
• s - the value will be applied in seconds

Easing

Set the transition timing function. This sets an acceleration curve, so that the speed of the transition can vary over its duration.

Options

• Ease - transition effect with a slow start, then fast, then end slowly
• Linear - Don't apply any easing
• Ease-in - transition effect with a slow start 
• Ease out - transition effect with a slow end
• Ease in-out -  transition effect with a slow start and end

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

Adding multiple transitions

You can add multiple transitions to an element and set them to different timing and easing. For example, you can transition the background color of and element and then, transition the height of an element.

To add multiple transitions:

1. Click the Add transition button below the current transition properties
2. A new row of transition fields will appear
3. Add the new transition properties.