Transition Ease ​
Utilities for setting transition easing functions.
| Class Name | Ease Function |
|---|---|
| ease-default | --cds-sys-transition-ease: var(--cds-sys-motion-ease-default) /* cubic-bezier(0.2, 0, 0, 1) */ |
| ease-linear | --cds-sys-transition-ease: var(--cds-sys-motion-ease-linear) /* cubic-bezier(0, 0, 1, 1) */ |
| ease-standard | --cds-sys-transition-ease: var(--cds-sys-motion-ease-standard) /* cubic-bezier(0.2, 0, 0, 1) */ |
| ease-standard-accelerate | --cds-sys-transition-ease: var(--cds-sys-motion-ease-standard-accelerate) /* cubic-bezier(0.3, 0, 0, 1) */ |
| ease-standard-decelerate | --cds-sys-transition-ease: var(--cds-sys-motion-ease-standard-decelerate) /* cubic-bezier(0, 0, 0, 1) */ |
| ease-emphasized | --cds-sys-transition-ease: var(--cds-sys-motion-ease-emphasized) /* cubic-;bezier(0.2, 0, 0, 1) */ |
| ease-emphasized-accelerate | --cds-sys-transition-ease: var(--cds-sys-motion-ease-emphasized-accelerate) /* cubic-bezier(0.3, 0, 0.8, 0.15) */ |
| ease-emphasized-decelerate | --cds-sys-transition-ease: var(--cds-sys-motion-ease-emphasized-decelerate) /* cubic-bezier(0.05, 0.7, 0.1, 1) */ |
Applying Transition Ease ​
Use the ease-{timing} utilities to control an element’s easing curve.
html
<div class="[...] transition-all transform ease-emphasized-decelarate hover:scale-110"> ... </div>Applying transition durations to all child elements ​
Apply transition duration to child elements by adding the corresponding child-transition duration utility class.
html
<div class="[...]Â child-transition-all ease-emphasized-decelarate">
<div class="[...]Â transform hover:scale-110"> ... </div>
<div class="[...]Â transform hover:scale-110"> ... </div>
</div>