Transitions
Atomic transition classes allow you to quickly apply transitions properties to an element. You can modify an element’s transition duration, property, or delay.
You can trigger CSS transitions directly with pseudo classes like :hover which activate on mouse over, :focus which activates when user tabs onto or clicks into an input element, or active when a user clicks on an element.
You can also trigger a CSS transition using JavaScript by adding or removing a class.
| Class | Output | Definition |
|---|---|---|
.t |
transition-duration: .1s; transition-property: all; transition-timing-function: ease-in; transition-delay: 0s; |
Apply a default transition style to an element. |
.t-slow |
transition-duration: .25s; |
Slow down the default transition to 0.25s. |
.t-fast |
transition-duration: .05s; |
Speed up the default transition to 0.05s. |
.t-unset |
transition-property: none; |
Remove transition properties from an element. |
.t-bg |
transition-property: background-color; |
Transition the background property of an element. |
.t-opacity |
transition-property: opacity; |
Transition the opacity property of an element. |
.t-shadow |
transition-property: box-shadow; |
Transition the box shadow property of an element. |
.t-delay |
transition-delay: .25s; |
Apply a transition delay to an element. |
.t-delay-unset |
transition-delay: 0s; |
Remove a transition delay from an element. |
The base transition applies a default duration timing function to an element.
<div class="t">…</div>Change an elements default transition duration.
<div class="t-slow">…</div>
<div class="t-fast">…</div>Target a specific CSS property for transition, or remove the default transition.
<div class="t-unset">…</div>
<div class="t-bg">…</div>
<div class="t-opacity">…</div>
<div class="t-shadow">…</div>Refers to how long you want to wait before starting the duration.
<div class="t-delay">…</div>
<div class="t-delay-unset">…</div>