Foundations
Transition
Transitions control hover states and interactive motion.
Default value
| Item | Selector / Token | Value |
|---|---|---|
| Default value | --kf-transition | all 0.3s ease-out |
| Helper class | .kf-transition | transition: var(--kf-transition); |
Usage
<a href="#" class="kf-transition">
Learn More
</a>Default value
| Item | Selector / Token | Value |
|---|---|---|
| Default utilities | .kf-transition | transition-all duration-300 ease-out |
Usage
<a href="#" class="kf-transition hover:text-kf-brand-color-1">
Learn More
</a>