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.

Classes

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.

Base transition

The base transition applies a default duration timing function to an element.

<div class="t">…</div>

Speed

Change an elements default transition duration.

<div class="t-slow">…</div>
<div class="t-fast">…</div>

.t-slow

.t-fast

Property

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>

.t-unset

.t-bg

.t-opacity

.t-shadow

Delay

Refers to how long you want to wait before starting the duration.

<div class="t-delay">…</div>
<div class="t-delay-unset">…</div>

.t-delay

.t-delay-unset