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.

1
<div class="t"></div>
.t

Speed

Change an elements default transition duration.

1
2
<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.

1
2
3
4
<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.

1
2
<div class="t-delay"></div>
<div class="t-delay-unset"></div>
.t-delay
.t-delay-unset