transition
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --sf-gradient-from, --sf-gradient-via, --sf-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
transition-timing-function: var(--sf-ease, var(--default-transition-timing-function));/* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--sf-duration, var(--default-transition-duration));/* 150ms */
|
transition-all
|
transition-property: all;
transition-timing-function: var(--sf-ease, var(--default-transition-timing-function));/* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--sf-duration, var(--default-transition-duration));/* 150ms */
|
transition-colors
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --sf-gradient-from, --sf-gradient-via, --sf-gradient-to;
transition-timing-function: var(--sf-ease, var(--default-transition-timing-function));/* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--sf-duration, var(--default-transition-duration));/* 150ms */
|
transition-opacity
|
transition-property: opacity;
transition-timing-function: var(--sf-ease, var(--default-transition-timing-function));/* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--sf-duration, var(--default-transition-duration));/* 150ms */
|
transition-shadow
|
transition-property: box-shadow;
transition-timing-function: var(--sf-ease, var(--default-transition-timing-function));/* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--sf-duration, var(--default-transition-duration));/* 150ms */
|
transition-transform
|
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--sf-ease, var(--default-transition-timing-function));/* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--sf-duration, var(--default-transition-duration));/* 150ms */
|
transition-none
|
transition-property: none;
|
transition-[<value>]
|
transition-property: <value>;
transition-timing-function: var(--sf-ease, var(--default-transition-timing-function));/* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--sf-duration, var(--default-transition-duration));/* 150ms */
|
transition-[initial]
|
transition-property: initial;
transition-timing-function: var(--sf-ease, var(--default-transition-timing-function));
transition-duration: var(--sf-duration, var(--default-transition-duration));
|
transition-(<custom-property>)
|
transition-property: var(<custom-property>);
transition-timing-function: var(--sf-ease, var(--default-transition-timing-function));/* cubic-bezier(0.4, 0, 0.2, 1) */
transition-duration: var(--sf-duration, var(--default-transition-duration));/* 150ms */
|
transition-(--my-value)
|
transition-property: var(--my-value);
transition-timing-function: var(--sf-ease, var(--default-transition-timing-function));
transition-duration: var(--sf-duration, var(--default-transition-duration));
|
