Skip to main content

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>
.t

Change an elements default transition duration.

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

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

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
Deploys by Netlify